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

This article mainly introduces the React component refs how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this React component refs how to use the article will have a harvest, let's take a look.

Ref as its name implies we know, in fact, it can be seen as a component reference, can also be said to be a logo. As a property of a component, its property value can be a string or a function.

In fact, the use of ref is not necessary. It doesn't have to be used even in scenarios where it is applicable, because functions implemented using ref can also be translated into other methods. However, since ref has its own applicable scenarios, it means that ref has its own advantages. With regard to this and the applicable scenario of ref, the official document says:

After returning the UI structure from the render method, you may want to break out of the restrictions of the React virtual DOM and call some methods on the component instance returned by render. In general, this is not necessary for data flow in an application, because active data (Reactive data) streams always ensure that the latest props is passed to every child output from render (). However, there are still several scenarios that are necessary or useful to use this approach: looking up the DOM tag of the rendered component (which can be thought of as the DOM identity ID), using the React component in a large non-React application, or converting your existing code into React.

Let's take a look at a scenario (the following example is often used to explain ref, so the scenario described below should be more classic): set the value of an element to an empty string through an event, and then make the element get focus.

Var App = React.createClass ({

GetInitialState: function () {

Return {userInput:''}

}

HandleChange: function (e) {

This.setState ({userInput: e.target.value})

}

ClearAndFocusInput: function () {

This.setState ({userInput:''}); / / set the value to an empty string

/ / I want to achieve and gain focus here.

}

Render: function () {

Return (

);

}

});

In the above example, we have implemented the click of a button to tell the input element to set the value to an empty string, but not yet to give the input element the focus. This is a bit difficult to implement because what is returned in render () is not a combination of actual subcomponents, but just a description of a specific instance at a particular time. This sentence feels quite round, in fact, render returns a virtual DOM, not a real DOM. So we don't need to just focus on those components that are returned from render ().

Speaking of which, it is not very helpful for us to achieve focus. To achieve the function of gaining focus, we need to implement it with the help of ref. We mentioned above that there are two types of values for ref, one is a string, and the other is a callback function.

Attributes on ref string

React supports a special property that you can add to any component returned by render (). This means that you can easily locate the component instance by marking the component returned by render (). That's what ref does.

The form of ref is as follows

To access this instance, you can access it through this.refs:

This.refs.myInput

In previous versions, we could access the component's DOM through React.findDOMNode (this.refs.myInput). But now that you've abandoned the findDOMNode function, you can access it directly using this.refs.myInput.

Ref callback function

The ref property can also be a callback function rather than a name. This function will be executed immediately after the component is mounted. The referenced component will be used as an argument to the function, which can be used immediately or saved for later use.

Its form is also relatively simple:

Render: function () {

Return this._input = c}} / >

}

ComponentDidMount: function () {

This._input.focus ()

}

Or

Render: function () {

Return (

);

}

Note here that when the reference component is uninstalled and the ref changes, the parameter value of the previous ref will be null. This will effectively prevent memory leakage. So there will be an if judgment in the above code:

If (input! = null) {

Input.focus ()

}

The above describes the use of ref scenarios and methods, let's add the above examples to complete, so as to achieve the function of gaining focus

Var App = React.createClass ({

GetInitialState: function () {

Return {userInput:''}

}

HandleChange: function (e) {

This.setState ({userInput: e.target.value})

}

ClearAndFocusInput: function () {

This.setState ({userInput:'}); / / Clear the input

/ / We wish to focus the now!

If (this.refs.myTextInput! = = null) {

This.refs.myTextInput.focus ()

}

}

Render: function () {

Return (

);

}

});

ReactDOM.render (

Document.getElementById ('content')

);

In this example, the render function returns a description of an instance. But the real example is through this.refs. Get the myTextInput. As long as some child component returned by render has ref= "myTextInput", this.refs. MyTextInput will get the correct instance.

This is the end of the article on "how to use refs, the component of React". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use refs, the component of React". If you want to learn more, 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.