A detailed explanation of refs in React (detailed tutorial)

This article mainly introduces the tutorial on using refs in React. Now I will share it with you and give you a reference.

ref is an attribute in React. When the render function returns an instance of a component, you can add a ref attribute to a virtual DOM node in the render, as shown in the following code:

In the above code, the render function only returns one e388a4556c0f65e1904146cc1a846bee tag, and there is only one d5fd7aea971a85678ba271703566ebfd tag in e388a4556c0f65e1904146cc1a846bee. In the attributes of the d5fd7aea971a85678ba271703566ebfd tag, add A ref attribute. The official documentation explains the ref attribute as follows:

ref attribute

React supports a very special attribute that you can use to bind to Any component that render() outputs goes up. This special property allows you to reference the corresponding backing instance returned by render(). This ensures that you always get the correct instance at any time.

What is the purpose of setting the ref attribute to the d5fd7aea971a85678ba271703566ebfd tag? The following is the explanation given by the official documentation:

In other code (typically event handling code), obtain the backing instance (backing instance) through this.refs, like this: this.refs.input. Among them, "input" is the value of the ref attribute set for the d5fd7aea971a85678ba271703566ebfd tag above.

Through the ref attribute, we can also get the real DOM node corresponding to the virtual DOM. There are two ways to get the real DOM node, as shown in the following code:

 
//下面4种方式都可以通过ref获取真实DOM节点 
var usernameDOM = this.refs.username.getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs.username); 
var usernameDOM = this.refs['username'].getDOMNode(); 
var usernameDOM = React.findDOMNode(this.refs['username']);

The following is a Demo to understand the use of ref:

The effect of demo running in the browser is as follows:

Enter any 1- in the top input box The number 10 allows the corresponding input box among the following 10 input boxes to gain focus. As shown in the figure above, after entering 3, the third input box below immediately gains focus. The ref attribute is used here, and the code is as follows:

In the render function, 10 input boxes are added to the body part of the html document. The ref attribute of each input box is set to ["index" index], and then input at the top In the handleChange function of the box, get the input number and get the value of the ref attribute. Finally, based on the value of the ref attribute, find the corresponding real DOM node, and then let the DOM node get the focus.

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

Related articles:

js experience sharing JavaScript anti-debugging skills

Using node.js to package webpack

How to use external module in webpack

The above is the detailed content of A detailed explanation of refs in React (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!