React：矢印キーでフォーカスを移動する方法は？ （TreeView）

Question

私は矢印キーを使用してtreeview内の要素をフォーカスすることができるソリューションを探しています。

現在、私はtreeView（ul）とtreeNode（li）を持っています。それぞれのtreeNodeは独自のtreeViewなどを持つことができます。すべてのtreeNodeにはtabIndex="0"というプロパティがあり、ツリービューをトラバブする可能性を追加するにはTabキーを使用します。それはうまく動作します。しかし、同じことをするためにキーボードの矢印のサポートを追加したいと思います。

どうすればいいですか？ P.P.私は純粋なReact、JSを期待している第三者ライブラリを使用したくない。

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

Answer 1

私は、ツリービュー内のフォーカスを移動するための解決策を発見しました。 まず、ツリー内にすべてのノードがあるはずです。 次に、document.activeElementを使用して、フォーカスされた要素を見つけることができます。その後、配列ノード内でこのアイテムを見つけることができます。 （document.activeElement == nodes[i]）、インデックスiを覚えています。矢印キーを使用してフォーカスを移動するには、ノードにeventListenerを追加して処理します。

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

：

たとえば、あなたがこのような何かを行うことができ、上方に移動します