React refs usage tutorial, reactrefs usage tutorial

Source: Internet
Author: User

React refs usage tutorial, reactrefs usage tutorial

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 render, as shown in the following code:

<body>   <script type="text/jsx">     var App = React.createClass({       render: function() {         return (           <div>             <input type="text" placeholder="input something..." ref="input" />           </div>         );       }     });     React.render(       <App />,       document.body     );   </script> </body> 

In the above Code, the render function returns only one <div> tag, and only one <input> tag in <div>. In the <input> tag attribute, A ref attribute is added. The official document explains the ref attribute as follows:

Ref attribute

React supports a very special attribute. You can bind it to any component output by render. This special attribute allows you to reference the corresponding backing instance returned by the render ). In this way, you can always get the correct instance at any time.

What is the purpose of setting the ref attribute for the <input> tag? The following is an explanation in the official document:

In other code (typical event processing code), obtain the backing instance through this. refs, just like this. refs. input. "Input" is the value of the ref attribute set for the <input> label 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:

<Input type = "text" ref = "username"/> // The following four methods can be used to obtain the real DOM node var usernameDOM = this through ref. refs. username. getDOMNode (); var usernameDOM = React. findDOMNode (this. refs. username); var usernameDOM = this. refs ['username']. getDOMNode (); var usernameDOM = React. findDOMNode (this. refs ['username']);

Here is a demo to learn how to use ref:

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

Enter any number ranging from 1 to 10 in the top input box to get the focus in the corresponding input box of the following 10 input boxes. For example, after entering 3, the following 3rd input boxes will get the focus immediately, the ref attribute is used here. The Code is as follows:

<! DOCTYPE html> 

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

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.