使用 react-keydown 捕获内部组件中的 keydown 事件

Question

我正在使用 react-keydown 库向我的应用程序添加键盘快捷键，但无法在内部对话框组件中使用它。对话框并不总是可见，但我希望按键在可见时起作用。我正在使用 event_handlers.js._onKeyDown(event) 方法，但缺少值：fn = undefined，而 fn 应该包含装饰函数。

我的组件看起来像：

<Container>
   <MyDialog>
      <material-ui-dialog/>
   </MyDialog>
</Container>

Container.js:

import keydown from 'react-keydown'
class Container extends Component {
   @keydown('enter') 
   someMethod1(){
      // working
   }
   render() {
      return (
         <div>
            <MyDialog/>
         </div>
      )
   }
}

MyDialog.js:

import keydown, {keydownScoped} from 'react-keydown'
@keydown('enter')
class MyDialog extends Component {
   @keydownScoped('enter')
   someMethod3(){
      // not working
   } 
}

Answer 1

根据您在评论中的描述，问题似乎是您的 Dialog 组件安装后失去焦点，因此其中的任何键绑定都不会收到击键。您有几个选择：

1) 通过装饰作为 Dialog 组件的祖先且不会失去焦点的组件来扩展键绑定的范围。在极端情况下，这可能是您应用程序的根组件。然后用keydownScoped修饰想要的Dialog组件方法。在该方法中检查道具以确保当前对话框处于活动状态。

2) 按照 https://github.com/glortho/react-keydown/issues/28.

的方式以编程方式激活您的对话框键绑定

希望对您有所帮助！

使用 react-keydown 捕获内部组件中的 keydown 事件

catch keydown events in inner components using react-keydown

keyboard-shortcuts

keydown

reactjs