How to use refs in React components

This article mainly introduces the detailed use of React component refs. Now I will share it with you and give you a reference.

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 a component attribute, 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 73a3ca28445b1c625f2086a50cb8c7df element 's value is set to the empty string, and the 73a3ca28445b1c625f2086a50cb8c7df 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 a string and the other is a 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. The referenced component will be used as a parameter to the function, which can use the component parameter immediately or save it 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 example 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(&#39;content&#39;)
);

In this example, the render function returns a description of the 73a3ca28445b1c625f2086a50cb8c7df 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.

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

Related articles:

How to modify the project name through the vue-cli webpack project

How to implement global registration and registration in the vue component Local registration

How to implement custom global methods in vue

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