如何全局使用键盘快捷键

Question

我使用 react-hotkeys 库。

我有这个：

class App extends React.Component {
  ...
  render(){
     return <Page />
  };

}

class Page extends React.Component {
   ...
   render(){
     return <DataTable />
   };
}

class DataTable extends React.Component {
   ...
   shortCutsKeymap = {
      'MOVE_NEXT_PAGE': ['right'],
      'MOVE_PREV_PAGE': ['left']
   };

   handleShortCuts = {
      'MOVE_NEXT_PAGE': (event) => {console.log('next')},
      'MOVE_PREV_PAGE': (event) => {console.log('prev')},
   };

   render(){
      return (
         <HotKeys keyMap={this.shortCutsKeymap} handlers={this.handleShortCuts}>
            ...
         </HotKeys>
      );
   };
}

仅当我单击数据 table 时快捷方式才有效 - 也就是说，我设置了焦点。我需要键盘快捷键在我的应用程序中的任何位置工作，而无需单击数据 table。

你能帮帮我吗？

Answer 1

我不确定您使用的是哪个版本的软件包。我安装的版本 react-hotkeys": "^2.0.0-pre3" 并且它有一个 GlobalHotKeys 组件，您可以像这样导出它：

import { GlobalHotKeys } from 'react-hotkeys'

你可以这样使用它：

<GlobalHotKeys keyMap={keyMap} handlers={handlers} />

如何全局使用键盘快捷键

How to use keyboard shortcuts globally

keyboard-shortcuts

reactjs