GlobalHotKeys（react-hotkeys）在专注于输入字段时不起作用答案

【问题标题】：GlobalHotKeys(react-hotkeys) not working when focused on the input fieldGlobalHotKeys（react-hotkeys）在专注于输入字段时不起作用
【发布时间】：2020-08-27 20:02:12
【问题描述】：

我在 React 项目中使用 React-hotkeys 作为键盘快捷键。专注于输入字段时，GlobalHotKeys 不起作用。请帮助我，我无法找出我缺少的东西。

演示（录屏链接）：https://recordit.co/ffVKvn9uVw

<GlobalHotKeys keyMap={REGISTRATION_KEY_MAP} handlers={this.handlers}>
      <RegistrationForm
         ref={regFormRef}
         onBillClick={this.onBillClick}
         patientId={this.state.patientID}
         openBill={this.state.openBill}
     />
</GlobalHotKeys>

    const handlers = {
        REGISTER: () => console.log(regFormRef),
        REGISTER_AND_BILL:  () => console.log(regFormRef),
    };

  const REGISTRATION_KEY_MAP = {
    REGISTER: ['command+enter', 'ctrl+enter'],
    REGISTER_AND_BILL: ['enter'],
  };

预期行为

如果我正在使用，那么它应该直接触发相关动作，焦点应该无关紧要。例如。我想提交一个表单，但目前，文档集中在任何输入框上，然后它应该提交表单

平台：

反应热键版本：react-hotkeys v2.0.0
浏览器铬
操作系统：iOS v10.13.6

【问题讨论】：

标签： javascript reactjs react-redux hotkeys angular-hotkeys

【解决方案1】：

configure({
    ignoreTags: ['input', 'select', 'textarea'],
    ignoreEventsCondition: function() {}
});

会解决这个问题。

【讨论】：

@BhuwanAdhikari 您将在哪里导入 GlobalHotKey。下一个问题是什么是配置？所以从'react-hotkeys'导入{configure}；

【解决方案2】：

有一种方法可以通过传递第二个参数来启用`input`（也可以是`textarea` 和`select`）中的热键。

这是一个“选项”参数。了解更多关于parameters.

import { useHotkeys } from "react-hotkeys-hook";

function App() {
  useHotkeys("n", e => {
      e.preventDefault();
      e.stopPropagation();
      // Do your thing here
    },
    // Add your hotkeys options in here
    { enableOnTags: ["TEXTAREA", "INPUT"] } // To enable on ['TEXTAREA', 'INPUT']
  );

  return <div id="shortcuts">{children}</div>;
}

export default App;

【讨论】：

有一种方法可以通过传递第二个参数来启用input（也可以是textarea 和select）中的热键。

有一种方法可以通过传递第二个参数来启用`input`（也可以是`textarea` 和`select`）中的热键。