如何聚焦位于子组件中的输入字段答案

【问题标题】：How to focus a input field, which is located in a child component如何聚焦位于子组件中的输入字段
【发布时间】：2017-02-03 05:29:52
【问题描述】：

我在父组件中有一个按钮。我想通过单击该按钮来聚焦位于子组件中的输入字段。我该怎么做。

【问题讨论】：

标签： reactjs autosuggest

【解决方案1】：

你可以使用refs来达到效果

class Parent extends React.Component {
  
  handleClick = () => {
    this.refs.child.refs.myInput.focus();
  }
  render() {
    return (
      <div>
        <Child ref="child"/>
        <button onClick={this.handleClick.bind(this)}>focus</button>
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      <input type="text" ref="myInput"/>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

更新：

React 文档建议使用 ref callback 而不是 string refs

class Parent extends React.Component {
  
  handleClick = () => {
    this.child.myInput.focus();
  }
  render() {
    return (
      <div>
        <Child ref={(ch) => this.child = ch}/>
        <button onClick={this.handleClick.bind(this)}>focus</button>
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      <input type="text" ref={(ip)=> this.myInput= ip}/>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：

如何用钩子做到这一点？

【解决方案2】：

与其从父组件访问子组件的输入元素，不如暴露一个方法如下，

class Parent extends React.Component {

  handleClick = () => {
    this.refs.child.setFocus();
  };

  render() {
    return (
      <div>
        <Child ref="child"/>
        <button onClick={this.handleClick.bind(this)}>focus</button>
      </div>
    )
  }
}

class Child extends React.Component {

  setFocus() {
    this.refs.myInput.focus();
  }
  
  render() {
    return (
      <input type="text" ref="myInput"/>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

【讨论】：