我正在尝试使用 react-hooks 为列表实现键盘导航。
重要- 此列表可以根据搜索缩小/增长。
我的问题是围绕Enter
应该运行一些回调的键。activeCursor
不会改变,我理解因为它不在数组中,但是我怎样才能在不重新运行的情况下useEffect
获得当前状态?handleKeyPress
useEffect
此外,理想情况下,我希望useEffect
只在 mount ( []
) 上运行,但由于filteredMessages
更改我必须重新调用它,这也是我觉得奇怪的事情,因为它eventListeners
所以我什至不确定他们每次会发生什么......
const useKeyboardNavigation = (filteredMessages, onMessageSelection) => {
const [activeCursor, setActiveCursor] = React.useState(0);
const size = filteredMessages.length
const handleKeyPress = (event) => {
if (event.key === 'ArrowDown') {
setActiveCursor(prev => prev < size ? prev + 1 : 0)
}
else if (event.key === 'ArrowUp') {
setActiveCursor(prev => prev > 0 ? prev - 1 : size)
}
else if (event.key === 'Enter') {
const msg = filteredMessages[activeCursor] // ??? Always 0
onMessageSelection(msg)
}
};
React.useEffect(
() => {
// Each time the list changes I reset the cursor
setActiveCursor(0)
document.addEventListener('keydown', handleKeyPress);
return () => document.removeEventListener('keydown', handleKeyPress);
},
[filteredMessages]
);
return [activeCursor, setActiveCursor];
}