React.js：键盘导航

Question

我想要在React中重写当前基于Backbone的应用程序。让我头疼的一项功能是键盘导航。该应用必须可以使用键盘导航。这大致是这样的：

有一个包含多个按钮的标题元素。根据网络请求的结果，还有一个具有可导航元素的主区域，这些元素是动态构建的。主区域中的元素以一种网格排列在屏幕上（通常，每行2行3个元素，但在模型上我显示了2行元素的行）。

焦点最初是在元素1上（尽管如果没有提取任何元素，那么我想应该聚焦标题按钮）。使用箭头键，应该能够在组件内导航（使用右箭头键从元素1到元素2;使用左箭头键从元素2到元素1;使用向下箭头键从元素1到元素3，等等，以及组件之间（从元素1到标题的按钮1与向上箭头键;从标题的按钮1到元素1与向下键等）。当聚焦在适当的元素上时，按下箭头按钮可以将不适合屏幕的元素带入视野中（例如，当聚焦在元素2上时按向右箭头应该向右“滚动”主区域，将元素5带入视口中。

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

Answer 1

我的建议：

为元素的容器组件添加和事件侦听器。在(left) => current - 1中设置一个事件监听器，其中有一个回调，它以某种方式根据它是什么按钮来计算下一个元素是什么（我很难就此提出建议 - 如果你严格要求每页只有4个2行，然后您可以执行right (right) => current + 1，(down) => current + (count / 2)，{ type: ELEMENT_SELECTED, payload: { selectedElID } } 等操作。这将触发像

这样的动作

this.setState({ selectedEl })

或者如果您只是将其保持在本地状态post_type

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

这有意义吗？

Answer 2

我今天遇到了这个老帖子，但是React-Navetree lib可能是解决此类问题的一个好方法。它计算节点之间的距离以确定谁是下一个/上一个节点，但不会保持活动的节点。