在 Web 应用程序中管理键盘快捷键有点棘手。

考虑一个 Widget 组件。

我希望能够根据键盘快捷键聚焦某些元素，并在此组件上运行函数。

class Widget extends React.Component { 
  componentDidMount() { 
    this.setBindings() 
  }, 
  componentWillUnmount() { 
    this.removeBindings(); 
  } 
}  

setBindings和removeBindings，将使用像mousetrap这样的库绑定(bind)特定的键盘快捷键

现在，上述解决方案存在两个问题:

1. 它使键盘快捷键的行为变得不可预测
   • 考虑挂载两个 Widget，其中一个会覆盖另一个的情况
2. Widget 与快捷方式紧密结合 - 现在，如果有人不想使用快捷方式，他们必须在 Widget 上设置某种标志。这破坏了代码的“粒度”——理想情况下，用户应该能够使用 Widget，然后使用 WidgetWithShortcuts，或者类似的东西

另一个潜在的解决方案是传递一个实例

const widgetShortcuts = (widgetInstance) => { 
  return { 
   'ctrl i': () => widgetInstance.focusInput(), 
  } 
} 

第二种解决方案的问题是:

1. widgetInstance 必须公开许多可公开访问的方法，例如 focusSomeThing 或 invokeProp 等

2. 如果Widget想要有一些工具提示，在某些地方显示键盘快捷键，有关键盘快捷键的信息将在不同的地方重复。可以在一个地方更改快捷方式，而在其他地方忘记这样做

是否有最佳实践或一些关于如何通过解决上述问题来实现键盘快捷键的想法？

请您参考如下方法:

React-hotkeys不是一种方法，而是一种工具，听起来可以解决您面临的问题。

一些注意事项:

• 您可以通过将组件包装在自定义 <HotKeys> 中来使用它附加有热键的组件。
• 方法不会公开，而是通过 keymap 分配给热键& handler
• 添加到子组件的热键将优先于父组件热键

一个issue I'm facing使用这个插件的一个缺点是，似乎没有办法阻止热键在输入字段中键入时触发，但除此之外，它似乎工作得很好。