Навигация во вложенном списке с помощью клавиш со стрелками ReactJS

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь сделать навигацию на боковой панели с помощью клавиш со стрелками, но у меня возникли некоторые проблемы. Я пытался сделать это с помощью чистого JavaScript с помощью nextElementSibling и previousElementSibling, но вложенные элементы не являются родственными для корневых элементов. Как это сделать правильно? Ниже я передал ссылку на песочницу, может быть, у кого-то есть решение. Спасибо!
https://codesandbox.io/s/pw3l6y542x?fontsize=14

Комментарии:

1. Что не так с вашим решением? чего вы пытаетесь достичь?

2. @felixmosh, я пытаюсь сделать навигацию с клавиатуры по этому списку. Вы можете попробовать сфокусировать первый элемент и передать Tab / Shift Tab. Я хочу сделать то же самое, но со стрелкой вниз / ArrowUp … это что-то вроде TreeView

3. Один трюк, который вы можете сделать, это позволить браузеру обрабатывать фокус, вам просто нужно нажать прокси-клавишу, чтобы вызвать «shift-tab» для сфокусированного элемента, а браузер сделает все остальное :] То же самое с нажатием кнопки down -> tab

4. @felixmosh спасибо, я постараюсь это сделать, у вас есть какие-нибудь идеи, как это сделать? 🙂