Как я могу перемещаться по списку с помощью клавиш со стрелками в реагировать?

Question

Я изменяю существующее приложение реагирования, в котором я отображаю список, и хотел бы перемещаться по списку с помощью клавиш со стрелками вверх / вниз. Прямо сейчас я не могу получить событие onKeyDown, когда я помещаю его в div.

Прежде чем кто-либо помечает как дубликаты, я просмотрел связанные вопросы и, похоже, не смог найти решенияв мой собственный код - они не работают для меня. Совсем недавно я пытался следовать принятому ответу здесь и смог получить событие для регистрации, когда я добавляю тег input div, но не сам по себе. Я поместил его в несколько разных тегов div, чтобы попытаться найти его в нужном месте, но мне кажется, что ничего не работает.

Я попытался добавить следующее в теги div ниже: onKeyDown={() => console.log("keyPressed"} Я также попытался добавить tabIndex = "0", но я получаю ошибку о назначении строки для числа.

return(
     <BaseLayout>
         <div className="top-container">
         <div id="primary-view">
         <myList className="custom-list-a" items={allListItems} />
)

На странице есть другие элементы, я хотел бы просто перебирать свой список клавишами со стрелками вверх и вниз. (У меня есть отдельная не относящаяся к делу функция onKeyPressed, которая будет увеличивать индекс и т. Д. Мне просто нужно событие, на которое нужно ответить.)

Заранее спасибо.

Answer 1

import React, {useEffect, useState} from 'react';

export default () => {
  const [arrow, updateState] = useState('')
  useEffect(() => {
    document.addEventListener("keydown", (e) => {
      if(e.key === 'ArrowDown') {
        updateState(String.fromCharCode(8595));
      } else if(e.key === 'ArrowUp') {
        updateState(String.fromCharCode(8593))
      }
    })
  }), [];
  return <p>{arrow}</p>
}

Stack Blitz