单击<div>以聚焦<input />（React）

Question

我知道如何用jquery做到这一点。但是我坚持使用React：每当用户点击div时，我将如何聚焦输入字段？

Answer 1

你需要在div上有一个onClick事件，并调用输入元素上的focus()函数，你可以通过refs访问

class App extends React.Component {
  
  render() {
    return (
      <div>
          <div onClick={() => {this.myInp.focus()}}>Focus Input</div>
          <input type="text" ref={(ip) => this.myInp = ip} />
      </div>
    )
  }
}

ReactDOM.render(<App/>, 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>

在上面的代码段中，ref={(ip) => this.myInp = ip}是一种回调方法，用于声明react-docs推荐的引用

Answer 2

选中此https://facebook.github.io/react/docs/refs-and-the-dom.html

通过ref你可以像jquery一样。

Answer 3

试试这个：

https://gradbee.com/project/gradbee-campus-ambassadors-2017/