Блог

Я использую библиотеку реактивных горячих клавиш.

У меня есть это:

 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-hotkeys": "^2.0.0-pre3" , и в ней есть GlobalHotKeys компонент, который вы экспортируете, как:

 import { GlobalHotKeys } from 'react-hotkeys'
  

Вы можете использовать его следующим образом:

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