反應：如何使用箭頭鍵移動焦點？ （TreeView）

Question

我正在尋找解決方案，它允許使用箭頭鍵在treeview中關注元素。

目前，我有treeView（ul）和treeNode（li）。每個treeNode可以有自己的treeView等等。每個treeNode具有tabIndex="0"屬性添加可能性使用Tab鍵導航槽樹視圖。它工作正常。但我想添加鍵盤箭頭支持來做同樣的事情。

任何想法如何做到這一點？ P.S.我不想使用任何第三方庫，期望純粹的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() }