如何在Reactjs中用程序触发焦点事件

Question

我正在尝试用程序触发焦点事件：

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>
);
}

演示

与onFocus事件绑定的console.log从未运行。为什么？

UPDATE如果我将目标元素从DIV转到INPUT，那么console.log就会运行。但这与官方文件公开冲突，即：

这些焦点事件作用于React DOM中的所有元素，而不仅仅是形成元素。

ReactJS 17 DOC

Answer 1

将tabIndex添加到div元素，表示它可以被聚焦

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