加载后反应焦点 div

React focus div after it has loaded

我目前正在试验 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。

我想我明白了。

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

tabIndex={"-1"}

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

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

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

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

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