class MyComponent extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
}
render() {
// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
个人理解:ref类似于id属性,子组件定义了一个ref后,父组件的refs对象就会注册这个自组件对象,ref是别名。ref还可以是函数如:<TextInput ref={(input) => {this.inputInstance = input}}/> 参数的对象时TextInput实例本身