Click on <div> to focus <input> (React) [closed]

Question

I know how to do this with jquery. But I am stuck with React: How would I focus an input field, whenever the user clicks on a div?

Answer 1

You need to have an onClick event on the div and the call the focus() function on the input element that you can access by refs in react

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>

In the above snippet ref={(ip) => this.myInp = ip} is a callback approach of declaring refs which is recommended by react-docs

Answer 2

Check this https://facebook.github.io/react/docs/refs-and-the-dom.html

Via ref you can anything jquery-like.