Question

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

考虑Widget组件。

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

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

setBindings和removeBindings将使用像mousetrap这样的库来绑定特定的键盘快捷键

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

它使键盘快捷键行为无法预测
- 考虑两个小部件安装的情况，一个覆盖另一个
小部件与快捷方式紧密结合 - 现在如果有人不想使用快捷方式，他们必须在Widget上拥有某种标志。这破坏了粒度＆＃39;代码 - 理想情况下，用户应该能够使用Widget，然后使用WidgetWithShortcuts，或类似的东西

另一个可能的解决方案是传递实例

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

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

widgetInstance必须公开许多可公开访问的方法，例如focusSomeThing或invokeProp等
如果Widget想要一些工具提示，显示某些地方的键盘快捷键，键盘缩略图的信息将在不同的地方重复。可以在一个地方更改快捷方式，忘记在其他地方这样做

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

Answer 1

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

一些注意事项：

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

此插件的一个issue I'm facing是，似乎没有一种方法可以防止在输入字段中键入时触发热键，但除此之外，它似乎工作得很好。

Answer 2

我认为您最好的选择是在顶层设置您的键盘快捷键侦听器，并将信息传递给可能或可能不关心快捷方式发生的组件。这解决了可能多次绑定侦听器的问题1，这也排除了暴露任何组件函数的需要。

然后你的小部件可以对道具变化作出反应（或不作出反应）：

class ShortcutProvider extends Component {
   state = { shortcut: null }

   componentDidMount() {
     // shortcut library listener
     onShortcut(shortcut => this.setState({ shortcut })
   }

   render() {
     <App shortcut={this.state.shortcut} />
   }
}

如果您将快捷方式传递给许多组件，则将快捷方式状态置于上下文中可能是值得的。

一种管理反应中键盘快捷键的方法

2 个答案:

一些注意事项：