React.js：键盘导航

Posted 2023-04-13

【中文标题】React.js：键盘导航

【英文标题】：React.js: Keyboard navigation

【发布时间】：2016-06-21 06:19:28

【问题描述】：

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

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

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

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

【问题讨论】：

不确定这是否会在图片中添加任何内容或只是重新调整您拥有的旧解决方案，但我设置了很多类似的东西（也在我现在正在做的 Backbone+jQuery 应用程序中）反应）。基本上按照您的描述进行：查看兄弟姐妹并根据左/右或上/下箭头比较顶部或左侧坐标。大部分逻辑都在github.com/jmm/Jeopardy-Scorekeeper/blob/… 中。使用 React，如果您出于某种原因需要，我猜您可以使用子节点的 refs 来查找与组件相关的节点。

你好@azangru 你找到解决办法了吗？

@ArtPip 不，对不起

【参考方案1】：

我的建议：

为元素的容器组件添加事件监听器。在componentDidMount 中设置一个事件侦听器，使用回调以某种方式根据它是什么按钮计算下一个元素是什么（我很难就此提出建议——如果您严格要求每页只有 4 个，最多 2 行，然后你可以做类似(left) => current - 1、right (right) => current + 1、(down) => current + (count / 2)等）。这将触发类似

的动作

 type: ELEMENT_SELECTED, payload:  selectedElID  

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

然后在您的渲染函数中，始终确保其渲染与视图中的选定元素。

这有意义吗？

【讨论】：

确实有道理，谢谢你的建议。我看到的这种方法的唯一问题是它假设了很多（也许太多）关于页面的结构。我想要的是一种方法，它与页面上元素的数量和它们的特定位置无关，但在从一个元素移动到下一个。

顺便问一下，您将如何收听按键事件？

不做任何真正的审查，这看起来可能很酷：npmjs.com/package/react-keydown 也就是说，确定下一个去哪一个取决于您的要求。根据您的要求更新您的问题，或者将其作为不同的 SO 问题可能会很有用。想到的一个想法是对 dom 子项进行排序，并寻找在页面上共享共同 x 位置的那些...如果我有时间考虑，我会更新我的答案。

【参考方案2】：

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