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 Bind a In other code, through the You can use the 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
render()
the corresponding support instance (backing instance) returned. This ensures that you always get the right instance at any time. 3.23.1. Usage ¶
ref
attribute to
render
on the return value of:<input ref="myInput" />
this.refs
get the support instance:var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
3.23.2. Complete instance ¶
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'));
getDOMNode()
method to get the DOM element