Tutorial sharing on using refs in React-JS Tutorial-php.cn

Tutorial sharing on using refs in React

小云云

Release： 2018-02-22 09:41:09

Original

1405 people have browsed it

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>

Copy after login

In the above code, the render function only returns one

tag, and there is only one tag in

, and the tag Among the attributes, a ref attribute is added. The official document explains the ref attribute as follows:

ref attribute

React supports one Very special property that you can use to bind to any component output by render(). 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 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 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;]);

Copy after login

Let’s learn about the use of ref through a demo:

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

Enter any number from 1 to 10 in the top input box to allow the corresponding input boxes in the following 10 input boxes to gain focus, as shown in the picture above. After entering 3, the third input box below will immediately gain focus, here The ref attribute is used, 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>

Copy after login

In the render function, 10 input boxes are added to the body part of the html document, and the ref attribute of each input box All are set to the method of ["index" + index], and then in the handleChange function of the top input box, the input number is obtained, and the value of the ref attribute is obtained. Finally, the corresponding value is found based on the value of the ref attribute. Real DOM node, and then let the DOM node get focus.

Related recommendations:

Sharing of usage examples of React component refs

The above is the detailed content of Tutorial sharing on using refs in React. For more information, please follow other related articles on the PHP Chinese website!