useRef div元素不自动聚焦页面加载，尽管聚焦在useEffect

Question

我目前正尝试在我的应用程序中添加一些键盘事件，如果按下某些代码就会触发。

这是在我的DashboardWrapper组件中完成的，该组件本质上只是一个样式组件，但会渲染其中的任何子组件:

<div className="full-vh full-vw flex-center" ref={wrapper} onKeyDown={handleKeyboardEvents}>
{children}
</div>

该组件在父页面中呈现如下:

<DashboardWrapper>
{ children in here} 
</DashboardWrapper>

组件使用useRef钩子，并将其分配给一个包装器变量，如下所示:

const wrapper = useRef(null)

然后，在useEffect中，我为它分配了一个事件监听器，调用一个触发一些控制台日志的函数:

useEffect(() => {
wrapper.current.focus()
if (wrapper.current !== null) {
console.log("Running inside of if..");
wrapper.current.addEventListener("keydown", handleKeyboardEvents)
}
return wrapper.current.removeEventListener("keydown", handleKeyboardEvents)
}, [])

它还调用'focus()'，它应该在页面加载时自动对焦所讨论的div -但由于某种原因，它不起作用。

作为参考，这是我的handleKeyboardEvents函数:

const handleKeyboardEvents = (e: React.KeyboardEvent<HTMLDivElement>) => {
console.log(e.code);
console.log(e);
if (e.ctrlKey && e.code === "KeyS") {
console.log("control and s pressed");
}
}

我可以让键盘事件开始触发的唯一方法是在不同元素之间手动制表，直到到达所讨论的div。

简而言之，我在这里试图实现的是能够在任何时候触发键盘事件，除非某个元素(例如输入)处于焦点。

可能有更有效的方法来做这件事，但这是我现在的尝试。

有人有什么建议吗?

Answer 1

考虑将tabIndex="-1"添加到<div>元素中，以便它可以集中。