title: React how to use refs to focus/blur?
body: <p>I'm reading the React documentation from Reactjs.org but it doesn't seem to be working for what I want to do.</p>
  <p>I want to render a component with nested divs. Upon clicking each of its nested divs, it turns into an input. Upon clicking outside of the specific div, it transforms the input back into a div.</p>
  <p>I wanted to use refs with blur/focus to achieve this but I cannot seem to figure out how to get it to work.</p>
  <p>This is what my component looks like so far, which is a child component:</p>
  <pre><code>constructor(props) {
      super(props);
      this.textInput = React.createRef();
  }
  focusRef = () =&gt; {
      this.textInput.current.focus();
  }
  focusEvent = () =&gt; {
      console.log(&quot;focus event.&quot;);
  }
  render() {
      let item = &lt;div
          className=&quot;item-class&quot;
          ref={this.textInput}
          onFocus={this.showIt}
          onClick={this.focusRef}&gt;Item Name&lt;/div&gt;
      return(&lt;div&gt;{item}&lt;/div&gt;)
  }
  </code></pre>
  <p>Looking at the sample code provided by <a href="https://reactjs.org/docs/refs-and-the-dom.html" rel="nofollow noreferrer">react.js.org</a>, I'm wondering why there is no onFocus event. Is that not required? How else will an event be triggered when the element receives focus? In my code, <code>focusRef</code> is triggered but <code>focusEvent</code> is not, which is also something I can't figure out. Secondly, how can I detect blur/losing focus, so I can swap my input back to a div? Lastly, I am confused as to how focus/blur events that swap an element between div and input can work with rendering, won't I need to rerender every time this swap occurs, AKA every time an element receives/loses focus? Doesn't that require needing to maintain focus of the elements (or lack thereof) between renders?</p>
  <p>I would prefer a solution that does not involve hooks, if possible.</p>