3

我在 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
4

2 回答 2

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

会解决这个问题。

于 2020-05-12T07:47:56.267 回答
0

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

这是一个“选项”参数。了解更多关于参数的信息。

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;
于 2021-12-25T05:06:35.960 回答