在 React JS 中处理关键事件答案

【问题标题】：Handling key events in React JS在 React JS 中处理关键事件
【发布时间】：2014-09-05 00:32:53
【问题描述】：

我正在使用 Javascript (React JS) 构建一个需要监听左右箭头键的组件。我的组件是一张包含图像列表的卡片。单击图像时，它会显示，但我希望能够按左右箭头键并导航图像。

我有一堆嵌套的 div，我正在尝试找出应该分配 onKeyPress 侦听器的哪一个。现在我将它分配给了许多 div，但我没有看到任何事件被触发。

【问题讨论】：

“现在我将它分配给了许多 div，但我没有看到任何事件被触发” --- div（通常）没有焦点，所以不能发出键盘事件
我猜你想将事件监听器绑定到document，就像你通常做的那样。

标签： javascript reactjs react-jsx reactjs-flux

【解决方案1】：

您需要在文档上设置一个 tabIndex 才能触发键盘事件。然后，您可以通过在列表容器上添加 onKeyPress 来捕捉这一点。 Docs 可以有重点，但你需要在你的. ComponentDidMount 并且您可能希望在顶级列表状态中跟踪选定的单元格并将 isSelected / isFocused 作为道具传递（取决于您是否需要多选）

【讨论】：