How to use React component refs

This time I will show you how to use React component refs, what are the precautions when using React component refs, the following is a practical case, let's take a look.

ref As the name suggests, we know that it can actually be viewed as a reference to a component, or it can also be said to be an identifier. As an attribute of a component, its attribute value can be a string or a function.

In fact, the use of ref is not necessary. Even in the scenarios where it is applicable, it is not necessary, because the functions implemented using ref can also be converted into other methods. However, since ref has its applicable scenarios, it means that ref has its own advantages. Regarding this and the applicable scenarios of ref, the official documentation says this:

After returning the UI structure from the render method, you may want to break out of the limitations of the React virtual DOM and use the component instance returned by render Call certain methods on. Generally speaking, this is not necessary for data flow in the application, because the reactive data flow always ensures that the latest props are passed to each child output from render(). However, there are still several scenarios where using this approach is necessary or beneficial: finding the DOM markup of the rendered component (which can be thought of as the DOM identification ID), using React components in a large non-React application Or convert your existing code into React.

Let’s take a look at such a scenario (the following example is often used to explain ref, so it can be seen that the scenario described below should be more classic): using an event to make the element 's value is set to the empty string, and the element is given focus.

var App = React.createClass({
  getInitialState: function() {
   return {userInput: ''};
  },
  handleChange: function(e) {
   this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
   this.setState({userInput: ''}); // 设置值为空字符串
        //这里想要实现获得焦点   
  },
  render: function() {
   return (
    <p>
     <input
      value={this.state.userInput}
      onChange={this.handleChange}
     />
          <input type="button"
           value="Reset And Focus"
           onClick={this.clearAndFocusInput}
        />
    </p>
   );
  }
 });

In the above example, we have implemented clicking the button to notify the input element to set the value to an empty string, but we have not yet implemented the input element to gain focus. This is a bit difficult to implement because what is returned in render() is not the actual combination of subcomponents, just a description of a specific instance at a specific time. This sentence feels quite confusing. In fact, render returns a virtual DOM, not a real DOM. So we don't need to focus only on those components returned from render().

Speaking of which, it doesn’t help us much in how to achieve focus. To achieve the function of getting focus, we need to use ref. We mentioned above that there are two types of ref values, one is string and the other is callback function.

ref string attribute

React supports a special attribute that you can add to any component returned by render(). This means that the component returned by render() is marked so that the component instance can be easily located. This is what ref is for.

The form of ref is as follows

<input ref="myInput" />

To access this instance, you can access it through this.refs:

this.refs.myInput

In previous versions, we can use React.findDOMNode(this .refs.myInput) to access the component's DOM. But now, the findDOMNode function has been abandoned and can be accessed directly using this.refs.myInput.

ref callback function

The ref attribute can also be a callback function instead of a name. This function will be executed immediately after the component is mounted. This referenced component will be used as the parameter of the function. This function can use this component parameter immediately, or of course, it can be saved for later use.

Its form is also relatively simple:

render: function() {
  return <TextInput ref={(c) => this._input = c} } />;
},
componentDidMount: function() {
  this._input.focus();
},

or

render: function() {
  return (
   <TextInput
    ref={function(input) {
     if (input != null) {
      input.focus();
     }
    }} />
  );
},

It should be noted here that when this reference component is uninstalled and this ref changes, the parameters of the previous ref The value will be null. This will effectively prevent memory leaks. Therefore, there will be an if judgment in the above code:

if(input != null){
     input.focus();
}

The usage scenarios and methods of ref are introduced above. Now we will complete the above examples to achieve the function of getting focus

var App = React.createClass({
  getInitialState: function() {
    return {userInput: ''};
  },
  handleChange: function(e) {
    this.setState({userInput: e.target.value});
  },
  clearAndFocusInput: function() {
    this.setState({userInput: ''}); // Clear the input
    // We wish to focus the <input /> now!
    if (this.refs.myTextInput !== null) {
      this.refs.myTextInput.focus();
    }
  },
  render: function() {
    return (
      <p>
        <input
          value={this.state.userInput}
          onChange={this.handleChange}
          ref=”myTextInput”   
                     />
        <input
          type="button"
          value="Reset And Focus"
          onClick={this.clearAndFocusInput}
          />
      </p>
    );
  }
});
ReactDOM.render(
  <App />,
  document.getElementById('content')
);

In this example, the render function returns a description of the instance. But the real instance is obtained through this.refs.myTextInput. As long as a subcomponent returned by render has ref="myTextInput", this.refs.myTextInput will get the correct instance.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS Add Element New Node

4 Ways to Loop Nodelist Dom List in JS

The above is the detailed content of How to use React component refs. For more information, please follow other related articles on the PHP Chinese website!