Реакция: как сместить фокус с помощью клавиш со стрелками? (В виде дерева)

Я ищу решение, которое позволяет фокусировать элементы внутри дерева с помощью клавиш со стрелками.

В настоящее время у меня есть treeView (ul) и treeNode (li). У каждого узла дерева может быть свой собственный вид дерева и так далее. Каждый узел дерева имеет свойство tabIndex="0" для добавления возможности навигации по дереву с помощью клавиши Tab. Это работает нормально. Но я хотел бы добавить поддержку стрелок клавиатуры, чтобы делать то же самое.

есть идеи как это сделать? P.S. Я не хочу использовать какие-либо сторонние библиотеки, ожидая чистого React, JS.

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


reactjs javascript focus arrow-keys shift
person Roman Mahotskyi    schedule 28.06.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я нашел решение для перемещения фокуса в дереве. Прежде всего, вы должны найти все свои узлы внутри вашего дерева. Затем вы можете найти сфокусированный элемент, используя document.activeElement. После этого вы сможете найти этот элемент в узлах вашего массива. (document.activeElement == nodes[i]) и запомните индекс i. Чтобы переместить фокус с помощью клавиш со стрелками, просто добавьте eventListener к вашему узлу и обработайте его.

Например, чтобы двигаться вверх, вы можете сделать что-то вроде этого:

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

person Roman Mahotskyi    schedule 30.06.2017