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() }