如何在 react 中使用箭头键浏览列表?

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

页面上还有其他元素，我只想使用向上和向下箭头键遍历我的列表。(我有一个单独的不相关的函数，叫做 onKeyPress，它将增加索引等，我只需要响应事件。

提前谢谢。

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

堆栈闪电战