<KeyboardShortcuts /> 是一个在渲染元素生命周期内处理键盘序列的组件。
当传入子元素时，它会捕获发生在子元素上或内部的按键事件。如果未传入子元素，则会在文档上捕获事件。
它使用 Mousetrap 库来实现键盘序列绑定。
示例
使用 shortcuts 属性对象渲染 <KeyboardShortcuts />：
import { useState } from 'react';
import { KeyboardShortcuts } from '@wordpress/components';
const MyKeyboardShortcuts = () => {
const [ isAllSelected, setIsAllSelected ] = useState( false );
const selectAll = () => {
setIsAllSelected( true );
};
return (
<div>
<KeyboardShortcuts
shortcuts={ {
'mod+a': selectAll,
} }
/>
[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }
</div>
);
};
属性
该组件接受以下属性：
children
要渲染的元素，用于在其上监控按键事件。
- 类型：
ReactNode - 是否必需：否
shortcuts
一个快捷方式绑定对象，其中每个键是键盘组合，其值是在按下该组合时将调用的回调函数。
- 类型：
Object - 是否必需：是
注意：每个快捷方式的值应为一个一致的函数引用，而不是匿名函数。否则，当组件卸载时，回调将不会正确解绑。
注意：KeyboardShortcuts 组件不会更新以反映更改后的 shortcuts 属性。如果需要更改快捷方式，请挂载一个单独的 KeyboardShortcuts 元素，这可以通过分配唯一的 key 属性来实现。
bindGlobal
默认情况下，如果键盘组合发生在可编辑字段中，则不会调用回调。如果希望全局观察键盘事件（包括在可编辑字段内），请将 bindGlobal 传递为 true。
- 类型：
Boolean - 是否必需：否
提示：如果您需要但并非所有键盘事件都要全局观察，只需渲染两个不同的 KeyboardShortcuts 元素，一个带有 bindGlobal 属性，另一个不带。
eventName
默认情况下，回调是对 keydown 事件的响应而被调用。要覆盖此行为，请传递带有特定键盘事件名称的 eventName。
- 类型：
String - 是否必需：否