A detailed explanation of refs in React (detailed tutorial)-JS Tutorial-php.cn

A detailed explanation of refs in React (detailed tutorial)

亚连

Release： 2018-06-05 17:53:44

Original

1617 people have browsed it

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>

Copy after login

In the above code, the render function only returns one

tag, and there is only one tag in

. In the attributes of the 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 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

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>

Copy after login

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!