React：如何使用箭头键转移焦点？（树视图）

Question

我正在寻找允许使用箭头键将元素聚焦在树视图中的解决方案。

目前，我有 treeView (ul) 和 treeNode (li)。每个 treeNode 可能有自己的 treeView 等等。每个 treeNode 都有tabIndex="0"属性来添加使用Tab键在 treeView 中导航的可能性。它工作正常。但我想添加键盘箭头支持来做同样的事情。

知道如何做到这一点吗？PS 我不想使用任何 3rd 方库，除了纯 React、JS。

<section>
  <header>
    { title }
  </header>
  <ul>
    <li>
      <section>
        <header>
          { title }
        </header>
        <ul>
          // etc.
        </ul>
      </section>
    </li>
  </ul>
<section>

Answer 1

我找到了在树视图中移动焦点的解决方案。首先，您应该找到树中的所有节点。然后您可以使用 找到焦点元素document.activeElement。之后，您就可以在数组节点中找到此项。( document.activeElement == nodes[i]) 并记住索引i。要使用箭头键移动焦点，只需添加eventListener到您的节点并处理它。

例如，要向上移动，您可以执行以下操作：

if(arrowUp) { elements[i + 1].focus() }