JIYIK CN >

In the article "React component refs detailed explanation" , we explained the use scenarios and methods of ref. One example is given: using an event to make an input element gain focus.

We also borrow this example here. In the original example, we used the ref string method. In this article, we will use the callback function method to implement it.

ES6 callback functions

Here we use ES6 callback function to get focus

var MyComponent = React.createClass({
    handleClick: function() {
        // Explicitly focus the text input using the raw DOM API.
        if (this.myTextInput !== null) {
            this.myTextInput.focus();
        }
    },
    render: function() {
      return (
            <div>
                <input type="text" ref={ (ref)=>this.myTextInput = ref } />
                <input
                    type="button"
                    value="Focus the text input"
                    onClick={this.handleClick}
                    />
            </div>
        );
    }
});

CommonJs callback function implementation

var MyComponent = React.createClass({
    handleClick: function() {
        // Explicitly focus the text input using the raw DOM API.
        if (this.myTextInput !== null) {
            this.myTextInput.focus();
        }
    },
    render: function() {
      return (
            <div>
                <input type="text" ref={ function(ref){this.myTextInput = ref}.bind(this) } />
                <input
                    type="button"
                    value="Focus the text input"
                    onClick={this.handleClick}
                    />
            </div>
        );
    }
});

Note: In the above code, CommonJs syntax is used, and there is .bind(this) after the callback function function(){}. This is something that needs attention. Bind this so that the this object in the function is the component. If this is not bound, then this.myTextInput in handleClick will report an undefined error. This is something that needs attention. This problem does not exist in ES6.

The purpose of this article is to introduce how to use the ref callback function through examples. I hope this article will be helpful to everyone.