Reactjs 如何全局使用键盘快捷键

我使用react热键库

我有这个：

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>
      );
   };
}

类应用程序扩展了React.Component{
...
render（）{
返回
};
}
类页扩展了React.Component{
...
render（）{
返回
};
}
类DataTable扩展了React.Component{
...
shortCutsKeymap={
“移动下一页”：[“右”]，
“移动上一页”：[“左”]
};
把手短切={
'MOVE_NEXT_PAGE'：（event）=>{console.log（'NEXT'）}，
'MOVE_PREV_PAGE'：（event）=>{console.log（'PREV'）}，
};
render（）{
返回(
...
);
};
}

快捷方式只在我点击数据表时起作用，也就是说，我设置了焦点。我需要键盘快捷键在应用程序中的任何位置工作，而不必单击数据表

---

您能帮我吗？

我不确定您使用的软件包的版本。我已经安装了一个新版本

react热键“^2.0.0-pre3”

它有一个

GlobalHotKeys

组件，您可以像这样导出：

import { GlobalHotKeys } from 'react-hotkeys'

您可以这样使用它：

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