react-ref

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实例本身

猜你喜欢

转载自blog.csdn.net/u011862930/article/details/88344028
今日推荐