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

Question

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

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

知道怎么做吗？ 附言我不想使用任何第三方库，除了纯 React、JS。

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

Answer 1

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

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

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