我们是否可以为React路由实现键盘快捷键

Question

考虑我在reactjs中有以下路线。

<NavLink to="/home">Home</NavLink>
<NavLink to="/about">About</NavLink>
<NavLink to="/contactus">Contact Us</NavLink>

我想为这些路线实现键盘快捷键。例如，如果我在键盘上单击 H ，则它应该路由到Home。 如何通过热键组件实现此功能。

Answer 1

您可以在文档上使用onkeypress事件监听器。

eventTarget.addEventListener("keydown", event => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});

您可以搜索每个键here的键代码

Answer 2

通常，这不是最好的主意，因为NavLink元素是一个链接，标记为a，并且可以导航到不同的url，以捕获JS中的键偶并在反应中我们拥有{ {1}}，onKeyDown，onKeyPress事件，它适用于按钮，输入-很好的做法。

onKeyUp

这只是一个示例，您可以根据需要修改pressKey，并管理tabIndex。