What are the uses of React component refs? Detailed explanation of the role of react component refs and its use

This article mainly explains the detailed explanation of react component refs. Now let’s take a look at the content of the text

ref As the name suggests, we know that in fact it can be The stand is a reference for a component, which can also be said to be a logo. As a component attribute, its attribute value can be a string or a function.

Actually, 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: ''}); // Set value Is the empty string
                                                                                                                                           value={this.state.userInput}
onChange={this.handleChange}
/>
onClick ={this.clearAndFocusInput}
                                                                                                                                                            Clicking the button notifies the input element to set the value to the empty string, but it has not yet been implemented to allow 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, what render returns is

virtual DOM

, not the 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

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

this.refs.myInput

In previous versions, we could access the DOM of the component through React.findDOMNode(this.refs.myInput). But now, the findDOMNode function has been abandoned and can be accessed directly using this.refs.myInput. (If you want to learn more, go to the PHP Chinese website React Reference Manual column to learn)

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.

The form is also relatively simple:

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

or

render: function() {
return (
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 parameter value of the previous ref 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 above describes the usage scenarios of ref and methods, below 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 now!
        if (this.refs.myTextInput !== null) {
            this.refs.myTextInput.focus();
        }
    },
    render: function() {
        return (
           

                                    value={this.state.userInput}
                    onChange={this.handleChange}
                    ref=”myTextInput”      
                                         />
                                    type="button"
                    value="Reset And Focus"
                    onClick={this.clearAndFocusInput}
                    />