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
EmoticonEmoticon