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

Posted 2023-03-17

【中文标题】GlobalHotKeys（react-hotkeys）在专注于输入字段时不起作用

【英文标题】：GlobalHotKeys(react-hotkeys) not working when focused on the input field

【发布时间】：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

【参考方案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;