React Refs

React supports a very special property Ref , which you can use to bind to any component of render () output.

This special attribute allows you to reference the corresponding backing instance returned by render (). So that you can always get the correct instance at any time.

Instructions

Bind a ref attribute to the render return value:

<Input ref = "myInput" />  

In other code, get the support instance with this.refs:

var INPUT = the this . refs . myInput ; var for inputValue = INPUT . value ; var inputRect = INPUT . getBoundingClientRect (); 

Complete example

You can use this to get the current React component, or use ref to get a reference to the component, as follows:

React instance

Var MyComponent = React . CreateClass ( { handleClick : function ( ) { // Get the focus using the native DOM API the this . refs . myInput . Focus ( ) ; } , the render : function ( ) { // when the assembly is inserted into the DOM, ref is a reference attribute to add a component to this.refs Return ( < div > < input type = " text " ref = " myInput " /> < input type = " button " value = " point I enter the box to get the focus " onClick = { this . HandleClick } /> </ div > ) ; } } ) ; ReactDOM . Render ( <MyComponent />, document . GetElementById ( ' example ' ) ) ;

try it"

In the example, we get a reference to the input instance of the input box, and after clicking the button, the input box gets the focus.

We can also use the getDOMNode () method to get the DOM element

React forms and events

In this section we will discuss how to use forms in React.

A simple example

In the example we set the input box input value value = {this.state.data} . We can update state when the input box value changes. We can use the onChange event to listen for changes in input and modify state.

React instance

Var HelloMessage = React . CreateClass ( { GetInitialState : function ( ) { Return { Value : ' Hello Runoob! ' } ; } , HandleChange : function ( event ) { This . SetState ( { value : event . Target . Value } ) ; } , render : function ( ) { Var Value = this . State . Value ; return < div > < input Type = " text " Value = { value } OnChange = { this . HandleChange } /> < h4 > { value } </ h4 > </ div >; } } ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' ) ) ;

try it"

The above code will render an input element with a value of Hello Runoob! And update the value entered by the user via the onChange event response.

Example 2

In the following example we will show you how to use a form on a subcomponent. The onChange method will trigger the state update and render the updated value to the value of the input box of the subcomponent to render the interface again.

You need to pass the parent component by creating an event handler ( handleChange ) and passing it as prop ( updateStateProp ) on your subcomponent .

React instance

Var Content = React . CreateClass ( { Render : function ( ) { Return < div > < input Type = " text " Value = { this . Props . MyDataProp } OnChange = { this . Props . UpdateStateProp } /> < h4 > { this . Props . MyDataProp } </ h4 > </ div >; } } ) ; Var HelloMessage = React . CreateClass ( { GetInitialState : function ( ) { Return { Value : ' Hello Runoob! ' } ; } , HandleChange : function ( event ) { This . SetState ( { value : event . Target . Value } ) ; } , render : function ( ) { Var Value = this . State . Value ; return < div > < Content MyDataProp = { value } UpdateStateProp = { this . HandleChange } > </ content > </ div >; } } ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' ) ) ;

try it"

---

React event

The following example demonstrates modifying the data with the onClick event:

React instance

Var HelloMessage = React . CreateClass ( { GetInitialState : function ( ) { Return { Value : ' Hello Runoob! ' } ; } , HandleChange : function ( event ) { This setState ( { value : ' rookie tutorial ' } ) } , Render : function ( ) { Var Value = this . State . Value ; return < div > < button OnClick = { this . HandleChange } > point me </ button > < h4 > { value } </ h4 > </ div >; } } ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' ) ) ;

try it"

When you need to update the state of the parent component from the subcomponent , you need to pass the parent component to your subcomponent by creating an event handler ( handleChange ) and as prop ( updateStateProp ). Examples are as follows:

React instance

Var Content = React . CreateClass ( { Render : function ( ) { Return < div > < button OnClick = { this . Props . UpdateStateProp } > point me </ button > < h4 > { this . Props . MyDataProp } </ h4 > </ div > } } ) ; Var HelloMessage = React . CreateClass ( { GetInitialState : function ( ) { Return { Value : ' Hello Runoob! ' } ; } , HandleChange : function ( event ) { This setState ( { value : ' rookie tutorial ' } ) } , Render : function ( ) { Var Value = this . State . Value ; return < div > < Content MyDataProp = { value } UpdateStateProp = { this . HandleChange } > </ content > </ div >; } } ) ; ReactDOM . Render ( < HelloMessage />, document . GetElementById ( ' example ' ) ) ;

try it"