Home > Article > Web Front-end > A detailed explanation of refs in React (detailed tutorial)

A detailed explanation of refs in React (detailed tutorial)

亚连Original: 2018-06-05 17:53:441563browse

This article mainly introduces the tutorial on using refs in React. Now I will share it with you and give you a reference.

ref is an attribute in React. When the render function returns an instance of a component, you can add a ref attribute to a virtual DOM node in the render, as shown in the following code:

<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      render: function() { 
        return ( 
          <p> 
            <input type="text" placeholder="input something..." ref="input" /> 
          </p> 
        ); 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body>

In the above code, the render function only returns one e388a4556c0f65e1904146cc1a846bee tag, and there is only one d5fd7aea971a85678ba271703566ebfd tag in e388a4556c0f65e1904146cc1a846bee. In the attributes of the d5fd7aea971a85678ba271703566ebfd tag, add A ref attribute. The official documentation explains the ref attribute as follows:

ref attribute

React supports a very special attribute that you can use to bind to Any component that render() outputs goes up. This special property allows you to reference the corresponding backing instance returned by render(). This ensures that you always get the correct instance at any time.

What is the purpose of setting the ref attribute to the d5fd7aea971a85678ba271703566ebfd tag? The following is the explanation given by the official documentation:

In other code (typically event handling code), obtain the backing instance (backing instance) through this.refs, like this: this.refs.input. Among them, "input" is the value of the ref attribute set for the d5fd7aea971a85678ba271703566ebfd tag above.

Through the ref attribute, we can also get the real DOM node corresponding to the virtual DOM. There are two ways to get the real DOM node, as shown in the following code:

<input type="text" ref="username" /> 
//下面4种方式都可以通过ref获取真实DOM节点 
var usernameDOM = this.refs.username.getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs.username); 
var usernameDOM = this.refs[&#39;username&#39;].getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs[&#39;username&#39;]);

The following is a Demo to understand the use of ref:

The effect of demo running in the browser is as follows:

Enter any 1- in the top input box The number 10 allows the corresponding input box among the following 10 input boxes to gain focus. As shown in the figure above, after entering 3, the third input box below immediately gains focus. The ref attribute is used here, and the code is as follows:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Refs</title> 
  <script type="text/javascript" src="../react-0.13.0/build/react.js"></script> 
  <script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script> 
</head> 
<body> 
  <script type="text/jsx"> 
    var App = React.createClass({ 
      handleChange: function(event) { 
        var index = event.target.value; 
        if(index >= 1 && index <= 10) { 
          //找到对应的输入框并将焦点设置到里面 
          var refName = "input" + index; 
          //var inputDOM = React.findDOMNode(this.refs[refName]); 
          var inputDOM = this.refs[refName].getDOMNode(); 
          inputDOM.focus(); 
        } 
      }, 
      render: function() { 
        var inputs = []; 
        for(var i = 1; i <= 10; i++) { 
          inputs.push(<p><li><input type="text" ref={"input" + i}/></li><br/></p>); 
        } 
        return ( 
          <p> 
            <label htmlFor="input" >在这里输入下面任意输入框的索引，光标会自动定位到输入框内：</label> 
            <input type="text" id="input" onChange={this.handleChange} /> 
            <hr /> 
            <ol> 
              {inputs} 
            </ol> 
          </p> 
        ) 
      } 
    }); 
    React.render( 
      <App />, 
      document.body 
    ); 
  </script> 
</body> 
</html>

In the render function, 10 input boxes are added to the body part of the html document. The ref attribute of each input box is set to ["index" index], and then input at the top In the handleChange function of the box, get the input number and get the value of the ref attribute. Finally, based on the value of the ref attribute, find the corresponding real DOM node, and then let the DOM node get the focus.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

js experience sharing JavaScript anti-debugging skills

Using node.js to package webpack

How to use external module in webpack

The above is the detailed content of A detailed explanation of refs in React (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to achieve text intermittent cycle scrolling effect through JSNext article：How to achieve text intermittent cycle scrolling effect through JS

See more

A detailed explanation of refs in React (detailed tutorial)

Related articles