全局热键(反应热键)在专注于输入字段时不起作用

Question

我正在使用React热键作为React项目的键盘快捷键。全局热键在专注于输入字段时不起作用。请帮助我，我无法找出我错过了什么。

演示(录制的屏幕链接(：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

Answer 1

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

将解决此问题。

Answer 2

有

一种方法可以通过传递第二个参数在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;

Answer 3

您可以使用enableOnFormTags配置

function ExampleComponent() {
useHotkeys('meta+s', (e) => {
e.preventDefault()
alert('We saved your progress!')
// ... set up our own saving dialog.
}, {
enableOnFormTags: ['input', 'select', 'textarea']
})
return (
<div>
<p>Press cmd+s (or ctrl+s for non mac) to open custom save dialog.</p>
</div>
)
}

见 https://react-hotkeys-hook.vercel.app/docs/documentation/useHotkeys/disable-hotkeys#enable-hotkeys-on-form-fields