加载后反应焦点 div

Question

我目前正在试验 React，我现在运行遇到了一个我似乎无法解决的问题。

在我的应用程序中，我使用一个 React 库来处理热键，这些热键有一个范围，所以当我希望某组热键在 div 中处于活动状态时，我必须将那个 div 带有 <HotKeys> 标签。

我必须切换其中的一些 div，所以我会有一些类似

的东西

isActive ?
  <HotKeys ...>
    <div ...>...</div>
  </HotKeys>
  : <div ...>...</div>

我现在需要想办法在创建 div 时对其进行聚焦。几乎网络上的每篇文章都建议这样的事情：

    const focusRef = useRef(null);
    useEffect(() => {
        focusRef.current.focus()
    })

    return (
        isActive ?
            <HotKeys ...>
                <div ref={focusRef} tabIndex={-1} ...>...</div>
            </HotKeys>
            : <div ...>...</div>
    )

我尝试了一些变体，包括使用 div 顶层（没有 <HotKeys> 包裹它们），但都无济于事。

当我在 useEffect 方法中打印 focusRef 对象时，我确实得到了预期的输出，正确设置了 focusRef 并填充了 current，但是调用 focus 方法不起作用。有一次我尝试从按钮调用 focus 方法并在组件完全加载后手动触发它，它似乎可以工作（document.activeElement 正在更改），然后由于某种原因它再次停止工作。所有这一切让我相信尽管调用了 useEffect 挂钩，但不知何故组件还没有完全加载，如果我理解正确的话，当元素呈现第一个 time/after 每次状态更改时触发。

我真的很感激能得到一些帮助，因为我昨天才开始学习 React。

Answer 1

我想我明白了。

您使用 tabIndex 是正确的，但您需要像这样将其作为字符串传递：

tabIndex={"-1"}

当您第一次加载它时，一个虚线框围绕着 div 并附加了 ref。查看此代码沙箱：

https://codesandbox.io/s/nifty-wildflower-eqjtk?file=/src/App.js

从这个接受的答案中获取，他们在其中传递了一个字符串：

Answer 2

您必须使用 useCallback ，因为 useRef 不会在创建 ref 时通知您

https://reactjs.org/docs/hooks-reference.html#useref

加载后反应焦点 div

React focus div after it has loaded

javascript

reactjs

react-hooks

focus