React Refs
React supports a very special attribute Ref which you can use to bind to the render() on any component of the output.
This special property allows you to refer to render() the corresponding support instance (backing instance) returned. This ensures that you always get the right instance at any time.
Usage
Bind a ref attribute to render on the return value of:
<input ref="myInput" />
In other code, through the this.refs get the support instance:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
Complete instance
You can use the this to get the current React component, or use the ref to get a reference to the component, as an example:
React instance
classMyComponentextendsReact.Component{handleClick(){//Using nativeDOM
API Get Focus this.refs.myInput.focus();}render(){//When a component is inserted into DOM
，Add a reference to a component using the ref attribute this.refsreturn(<div>
<inputtype="text"ref="myInput"/>
<inputtype="button"value="Click on my input box to get focus "onClick={this.handleClick.bind(this)}/>
</div>);}}ReactDOM.render(<MyComponent/>,document.getElementById('example'));
In the example, we get the reference of the support instance of the input box, and the input box gets the focus after clicking the button.
We can also use getDOMNode() method to get the DOM element