Réagir: Comment changer de focus en utilisant les touches fléchées? (TreeView)

Question

Je cherche une solution qui permette de focaliser des éléments dans treeview en utilisant les touches fléchées.

Actuellement, j'ai treeView (ul) et treeNode (li). Chaque treeNode peut avoir son propre treeView et ainsi de suite. Chaque treeNode a la propriété tabIndex="0" pour ajouter la possibilité de naviguer à travers la treeView en utilisant la clé Tab. Ça fonctionne bien. Mais je voudrais ajouter le support de la flèche du clavier pour faire la même chose.

Une idée de comment faire cela? P.S. Je ne veux pas utiliser de libs tierces, attendez-vous à React pur, JS.

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

Answer 1

J'ai trouvé une solution pour déplacer le focus au sein treeView. Tout d'abord vous devriez trouver tous vos nœuds dans votre arbre. Ensuite, vous pouvez trouver l'élément ciblé en utilisant document.activeElement. Après cela, vous serez en mesure de trouver cet élément dans vos noeuds de tableau. (document.activeElement == nodes[i]) et rappelez-vous l'index i. Pour déplacer la mise au point à l'aide des touches fléchées, ajoutez simplement eventListener à votre nœud et gérez-le.

Par exemple, pour se déplacer vers le haut, vous pouvez faire quelque chose comme ceci:

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