React:如何使用箭头键转移焦点？(TreeView)

Question

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

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

你知道怎么做吗？附言:我不想使用任何第三方库，除了纯反应，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() }