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事件

1 个答案: