键盘快捷方式

<键盘快捷键/>是一个组件,在呈现元素的生存期内处理键盘序列。

当传递给孩子时,它将捕获孩子身上或孩子体内发生的关键事件。如果没有传递子级,则在文档中捕获事件。

它使用捕鼠器库来实现键盘序列绑定。

例子

伦德尔<键盘快捷键/>用一个快捷方式道具对象:

从'react'导入{useState};从“@wordpress/components”导入{KeyboardShortcuts};const MyKeyboardShortcuts=()=>{const[isAllSelected,setIsAllSelected]=使用状态(false);const selectAll=()=>{setIsAllSelected(true);};返回(<div><键盘快捷方式快捷方式={{“mod+a”:选择全部,} }/>[cmd/ctrl+A]是否按下组合键?{是否全部选中?'是':'否'}</div>);};

道具

组件接受以下道具:

儿童

要呈现的元素,将对其监视关键事件。

  • 类型:反应节点
  • 必需:否

快捷方式

快捷键绑定的对象,其中每个键都是键盘组合,其值是按下组合键时要调用的回调。

  • 类型:对象
  • 必需:是

注:每个快捷方式的值应该是一致的函数引用,而不是匿名函数。否则,当组件卸载时,回调将无法正确解除绑定。

注:这个键盘快捷方式组件将不会更新以反映更改快捷方式道具。如果需要更改快捷方式,请安装一个单独的键盘快捷方式元素,可以通过分配唯一钥匙道具。

bindGlobal(绑定全局)

默认情况下,如果键组合出现在可编辑字段中,则不会调用回调。通过bindGlobal(绑定全局)作为真实的是否应该全局观察关键事件,包括在可编辑字段中。

  • 类型:布尔值
  • 必需:否

提示:如果需要全局观察一些但不是所有键盘事件,只需呈现两个不同的键盘快捷方式元素,一个带,一个不带绑定全局道具。

事件名称

默认情况下,调用回调以响应键盘按下事件。要覆盖此项,请传递事件名称具有特定键盘事件的名称。

  • 类型:字符串
  • 必需:否

工具书类