如何全局使用键盘快捷键

时间:2019-04-12 08:43:10

标签: reactjs keyboard-shortcuts

我使用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>
      );
   };
}

快捷键仅在单击数据表时才起作用-也就是说,我设置了焦点。我需要键盘快捷键可以在应用程序中的任何地方工作,而无需单击数据表。

可以帮我吗?

1 个答案:

答案 0 :(得分:0)

我不使用您使用的软件包的哪个版本。我已经安装了版本 with s (someId, type, value1, value2) as ( select 1, 2, 'hello', to_number(null) from dual union all select 1, 3, null , 2 from dual union all select 1, 4, null , null from dual union all select 2, 4, null , null from dual) select someid, max(case when type = 2 then value1 end) type2_value1, max(case when type = 3 then value2 end) type3_value2/*, max(case when type = 4 then value1 end) type4_value1 max(case when type = 4 then value2 end) type4_value2*/ from s group by someid; SOMEID TYPE2 TYPE3_VALUE2 ---------- ----- ------------ 1 hello 2 2 ,它具有一个react-hotkeys": "^2.0.0-pre3"组件,您可以像这样导出该组件:

GlobalHotKeys

您可以像这样使用它:

import { GlobalHotKeys } from 'react-hotkeys'