React中手动触发div的focus事件无效？与官方文档冲突求解

尝试通过代码手动触发div元素的focus事件，但绑定的onFocus回调始终不执行，代码如下：

import { useRef } from "react";
import "./styles.css";

export default function App() {
  const ref = useRef();

  function focusTrig() {
    ref.current.focus();
  }
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button onClick={focusTrig}>Focus trigger</button>

      <div ref={ref} onFocus={() => console.log("FOCUSED!")}>
        Focus Target
      </div>
    </div>
  );
}

将目标元素改为INPUT后，console.log正常执行，但这与React 17官方文档描述冲突，文档内容翻译为：

这些焦点事件适用于React DOM中的所有元素，而不仅仅是表单元素。

这并不是React文档的问题，核心原因是普通div默认不属于可聚焦元素：

• 浏览器原生规则中，只有特定类型的元素默认支持聚焦，比如表单控件（input、textarea等）、带href的a标签、button标签等。
• 对于div这类普通元素，默认无法获得焦点，因此调用.focus()不会触发任何focus相关事件。
• React文档所说的"焦点事件适用于所有元素"，是指当元素具备聚焦能力时，React可以正常处理其focus事件，而非强制让所有元素都能被聚焦。

解决方法很简单，给div添加tabIndex属性，使其成为可聚焦元素：

• tabIndex="0"：元素可通过Tab键聚焦，且遵循页面默认的Tab顺序
• tabIndex="-1"：元素只能通过代码调用.focus()聚焦，无法通过Tab键选中

修改后的目标div代码示例：

<div ref={ref} tabIndex="0" onFocus={() => console.log("FOCUSED!")}>
  Focus Target
</div>

此时点击按钮调用.focus()，就能正常触发onFocus回调并打印日志。

内容的提问来源于stack exchange，提问作者Nemus