reactjs - 如何在反应中使用箭头键浏览列表？

Question

我正在修改显示列表的现有反应应用程序，并希望使用向上/向下箭头键浏览列表。现在，当我将 onKeyDown 事件放在 div 中时，我似乎无法触发它。

在任何人标记为重复之前，我已经查看了相关问题并且似乎无法将解决方案应用于我自己的代码 - 它们对我不起作用。我最近试图遵循此处接受的答案，并且当我添加到输入 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 的单独无关函数，它将增加索引等，我只需要响应事件。）

提前致谢。

标签： reactjsreduxtsx

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>
}

堆栈闪电战