如何使用参照进行聚焦/模糊？

Question

我正在阅读来自Reactjs的React文档。但它似乎不是为我想做的事情而工作。

我想渲染一个有嵌套div的组件。单击每个嵌套div后，它会变成一个输入。在特定div之外单击后，它将输入转换回div。

我想使用带有模糊/焦点的参考文件来实现这一点，但我似乎不知道如何让它工作。

这就是我的组件到目前为止的样子，它是一个子组件：

constructor(props) {
    super(props);
    this.textInput = React.createRef();
}
focusRef = () => {
    this.textInput.current.focus();
}
focusEvent = () => {
    console.log("focus event.");
}
render() {
    let item = <div
        className="item-class"
        ref={this.textInput}
        onFocus={this.showIt}
        onClick={this.focusRef}>Item Name</div>
    return(<div>{item}</div>)
}

查看react提供的示例代码。js。org，我想知道为什么没有onFocus事件。这不是必需的吗？当元素接收到焦点时，如何触发事件？在我的代码中，focusRef被触发，但focusEvent没有，这也是我无法理解的。其次，如何检测模糊/失焦，以便将输入切换回div？最后，我对在div和input之间交换一个元素的焦点/模糊事件如何处理渲染感到困惑，我是否需要在每次交换发生时重新渲染，也就是每次元素接收/失去焦点时重新渲染？这难道不需要在渲染之间保持元素的焦点（或缺少焦点）吗？

如果可能的话，我更喜欢不涉及钩子的解决方案。

Answer 1

为了使div元素可聚焦，需要使其可交互。向div添加一个制表符索引，这样就可以赋予它焦点。

function App() {
  return (
    <div className="App">
      <div 
        tabIndex={0} 
        onFocus={() => console.log('focus')} 
        onBlur={() => console.log('blur')}
      >
        Click or tab to me!
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>