React中的Ref

以获取输入框焦点为例

1、字符串形式

<div id="example"></div>
<script type="text/babel">
class StringComponent extends React.Component {
constructor(){
  super()
}

handleClick() {
  // 使用原生的 DOM API 获取焦点
  this.refs.stringInput.focus();
}

render() {
    //当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="stringInput" />
        <input type="button" value="获取输入框焦点" onClick={this.handleClick.bind(this)} />
      </div>
    );
  }
}
 
ReactDOM.render(  //把组件放到 div 里面去
  <StringComponent  />,
  document.getElementById('example')
);
</script>

2、React 16.3版本以后，使用React.createRef()方法来创建ref，并赋值给一个变量，然后通过ref挂载到DOM节点或组件上，该ref的current属性将能拿到DOM节点或组件的实例。

<div id="example"></div>
<script type="text/babel">
class StringComponent extends React.Component {
constructor(){
  super()
  this.stringInput = React.createRef();
}

handleClick() {
  // 使用原生的 DOM API 获取焦点
  this.stringInput.current.focus();
}

render() {
    //当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref={this.stringInput} />
        <input type="button" value="获取输入框焦点" onClick={this.handleClick.bind(this)} />
      </div>
    );
  }
}
 
ReactDOM.render(  //把组件放到 div 里面去
  <StringComponent  />,
  document.getElementById('example')
);
</script>