Shulou(Shulou.com)05/31 Report--

This article Xiaobian for you to introduce in detail "what are the ways to achieve the ref callback function in React", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the ways to implement the ref callback function in React?" the article can help you solve your doubts.

ES6 callback function

Here we use the ES6 callback function to get the 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 (

This.myTextInput = ref} / >

);

}

});

Implementation of CommonJs callback function

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 (

);

}

});

Note: in the above code, the CommonJs syntax is used, and the callback function function () {} is followed by .bind (this). It is important to note that the this is bound so that the this object in the function is the component. If you do not bind this, the this.myTextInput in handleClick will report an undefined error. This is something to be aware of, and this problem does not exist in ES6.

After reading this, the article "what are the ways to implement the ref callback function in React" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.