What are the ways to implement the ref callback function in React
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.
