reactjs - React.js : Keyboard navigation

Question

我正在考虑用 React 重写我们当前基于 Backbone 的应用程序。让我头疼的一项功能是键盘导航。该应用程序必须可以使用键盘进行导航。大致如下所示:

有一个带有多个按钮的标题元素。还有一个主要区域，其中包含根据网络请求的结果动态构建的可导航元素。主区域中的元素以网格形式排列在屏幕上(通常为 2 行，每行 3 个元素，但在模型上我显示了 2 行元素)。

焦点最初位于元素 1 上(尽管如果没有获取任何元素，那么我猜应该将焦点放在标题按钮上)。使用箭头键，人们应该能够在组件内导航(使用右箭头键从元素 1 到元素 2；使用左箭头键从元素 2 到元素 1；使用向下箭头键从元素 1 到元素 3，等等)，以及组件之间(使用向上箭头 ket 从元素 1 到标题的按钮 1；使用向下键从标题的按钮 1 到元素 1 等)。当聚焦于适当的元素时，应通过按箭头按钮来显示不适合屏幕的元素(例如，当聚焦于元素 2 时按向右箭头应将主区域“滚动”到右侧，并且将元素 5 引入视口(viewport))。

目前，在原始的基于 Backbone 的应用程序中，此功能是通过向所有可导航元素添加自定义属性，然后使用基于 jQuery 的第三方库计算元素在屏幕上的绝对位置并移动来实现的。焦点从一个元素转移到下一个元素取决于它们相对于彼此的定位方式。重现此行为的惯用 React(+ Redux，如果可能)方法是什么？

Answer 1

我的建议:

向元素的容器组件添加事件监听器。在 componentDidMount 中设置一个事件监听器，并使用回调以某种方式计算下一个元素基于它是什么按钮(我很难对此提出建议 - 如果您严格要求每个元素只有 4 个)页面最多 2 行，那么您可以执行类似 (left) => current - 1、right (right) => current + 1、(down ) => 当前 + (计数/2) 等)。这将触发类似的操作

{ type: ELEMENT_SELECTED, payload: { selectedElID } }

或者如果您只是将其保留在本地状态，this.setState({ selectedEl })

然后在渲染函数中，始终确保其在 View 中使用所选元素进行渲染。

这有意义吗？