javascript - react : How to shift focus using arrow keys?( TreeView )

Question

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

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

知道怎么做吗？附言我不想使用任何第 3 方库期望纯 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) { 元素[i + 1].focus() }