antd-record-hotkey-input
Ant Design 快捷键录制输入框
Install
npm i antd-record-hotkey-input -S
Usage
import { Empty, message } from 'antd';
import RecordShortcutInput from 'antd-record-hotkey-input';
import { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
const App = () => {
const [shortcut, setShortcut] = useState('');
const shortRef = useHotkeys<HTMLDivElement>(
shortcut,
() => {
message.success('快捷键触发');
},
{
preventDefault: true,
},
);
return (
<>
<RecordShortcutInput
style={{ width: 500 }}
defaultValue={shortcut}
onConfirm={(value) => {
console.log('快捷键变更为:', value);
setShortcut(value);
}}
/>
<div tabIndex={-1} className="container" ref={shortRef}>
{shortcut ? <span>点击聚焦,测试快捷键:{shortcut}</span> : <Empty />}
</div>
</>
);
};
export default App;