Home > Article > Web Front-end > Tutorial sharing on using refs in React

Tutorial sharing on using refs in React

小云云Original: 2018-02-22 09:41:091340browse

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, and the d5fd7aea971a85678ba271703566ebfd 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 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;]);

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>

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!

html 事件 dom this input

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：JS implements intermittent scrolling of textNext article：JS implements intermittent scrolling of text

See more

Tutorial sharing on using refs in React

Related articles