什么是React键盘事件处理程序？
它是一个反应组件，可帮助我们处理键盘事件，例如按键，按键按下，按键等。
反应 Keyboard Event Handler的主要功能
1) 它支持组合键（例如CTRL + S甚至CTRL + SHIFT + s）
2) 它还仅支持处理修改键（例如，按Ctrl键的同时处理）
3) 支持几乎所有按键，包括功能键，例如F1，F2等。
4) 它为我们提供了易于使用和一致的键名，以帮助我们摆脱数字键代码和/或浏览器兼容性的困扰。
5) 它还支持诸如“字母数字”之类的键别名以及用于处理各种键的所有快捷方式。
6) 最后，它还支持多个处理程序实例，并通过使用Props提供了一种简单的方法来控制，启用/禁用每个处理程序的状态。
反应键盘事件处理程序的用法：
默认情况下，KeyboardEventhandler仅处理来自document.body的全局按键事件源。这些事件是在没有任何焦点元素（event.target）的情况下触发的。它不会处理来自表单控件（例如输入），链接或任何启用了标签的（可聚焦）元素（例如具有tabIndex属性的元素）的按键事件。
Web浏览器通常为启用选项卡的元素提供默认的键盘行为。让他们更合适。在大多数情况下，浏览器都能完成工作。
输入以下给出的默认React Starter代码。
从“ react-keyboard-event-handler”导入KeyboardEventHandler；
const ComponentA =（道具）=> (<div>
<div>检测到的密钥：{props.eventKey}</div>
<KeyboardEventHandler
handleKeys = {['a'，'b'，'c']}
onKeyEvent = {（key，e）=>console.log（`在$ {key}`的keydown事件发生时做一些事情）>
</div>);
但是，可以通过将handleFocusableElements prop设置为true来更改此默认设置。
处理来自子元素的关键事件：
如果KeyboardEventHandler包裹在任何子元素周围，它将处理并且仅hsndle从其后代元素派生的按键事件。这包括任何形式的控件，链接或启用选项卡的元素。
从“ react-keyboard-event-handler”导入KeyboardEventHandler；
const ComponentA =（道具）=> (<div>
<div>检测到的密钥：{props.eventKey}</div>
<KeyboardEventHandler
handleKeys = {['a'，'b'，'c']}
onKeyEvent = {（key，e）=>console.log（`在$ {key}`的keydown事件中执行一些操作）>
<输入类型=“文本”占位符=“将处理关键事件” />
<a href=”#” >来自焦点元素的关键事件将被处理</a>
</ KeyboardEventHandler>
</div>);
对于表单控件元素，React提供了onKeyDown，onKeyPress和onKeyUp综合事件。但是，您可能会发现使用KeyboardEventHandler提供的键名/别名更容易。
API摘要-
| 属性 | 类型 | 默认 | 描述 |
| handleKeys | 数组 | [] | 此处理程序应处理的键数组。
密钥还有一些方便的别名，有关详细信息，请参见下面的内容。例如 ['a'，'b'，'数字'] |
| handleEventType | 串 | 按键 | 键盘事件类型。
可以是“按键”，“按键按下”或“按键”。 *注意：“ 键press”事件仅支持可打印的键。即不支持修饰键或“标签”，“输入”等。 |
| handleFocusableElements | 布尔 | 假 | 默认情况下，处理程序仅处理源自 文档主体。当此道具设置为 真正，它还将处理所有可聚焦元素的关键事件。此道具仅在没有孩子的情况下适用。 |
| 被禁用 | 布尔型 | 假 | 启用/禁用处理键盘事件 |
| isExclusive | 布尔型 | 假 | 设置为 真正，所有其他处理程序实例都将被暂停。
这对于暂时禁用所有其他键盘事件处理程序很有用。 例如，用于在模式打开时使用其键盘事件处理来禁止页面上的任何其他处理程序。 |
| onKeyEvent | 功能 | （）=> 空值 | 处理程序检测到匹配的键事件时要调用的回调函数。
回调函数的签名为： 函数（键，事件）{…} 键 按键名称与当前键盘事件匹配。 事件 本地人 键盘事件。例如您可以使用 事件.keyCode 获取数字键码。这对于处理不受支持的密钥很有用（即，没有为密钥定义密钥名称）。 |
| 孩子们 | 任何 | 空值 | 如果 KeyboardEventHandler包装任何子元素，它将处理并且仅处理从其子元素（包括任何表单控件，链接或启用了Tab的元素）派生的键事件。 handleFocusableElements什么时候没有效果 孩子们存在。 |
密钥名称和密钥别名-
手柄键属性接受键名数组。密钥名称和密钥别名无需开发人员处理数字代码或密钥代码以及浏览器兼容性问题。所有这些都是使用KeyboardEvent.code和KeyboardEvent.key完成的。
– 所有键名均小写，以保持一致
– 为了处理组合键，如shift和a，请使用shift + a格式的键名
– 您还可以使用键名别名，例如“数字”或“字母数字”。
通用键
您可以通过使用一个或多个公用键的名称数组来处理它们。
<KeyboardEventHandler
handleKeys = {['a']}
onKeyEvent = {（key，e）=>console.log（“仅处理“ a”键”）} />
| 键名 | 说明/关键代码 |
| a，b，... z | 字母键65〜90和97〜112 |
| 0，1，…9 | 数字键48〜57和41，96〜105 |
| f1，f2，... f19 | 功能键112〜130 |
| 退格键 | 8 |
| 删除/删除 | 46 |
| 插入/插入 | 45 |
| 标签 | 9 |
| 输入/返回 | 13 |
| 退出 | 27 |
| 空间 | 32 |
| 分页 | 33 |
| 向下翻页 | 34 |
| 结束 | 35 |
| 首页 | 36 |
| 剩下 | 37 |
| 向上 | 38 |
| 对 | 39 |
| 下 | 40 |
| 转移 | 16 |
| ctrl | 17 |
| alt | 18 |
| 帽 | 20 |
| 数 | 编号144 |
| 明确 | 12 |
| 元 | Meta，Win，Window，Cmd，Command，91 |
| ; | 186、59 |
| = | 187、61 |
| , | 188、44 |
| -/减去 | 189、45、173、109 |
| . | 190、110 |
| / | 191、111 |
| ` | 192 |
| [ | 219 |
| \ | 220 |
| ] | 221 |
| * | 106 |
| + /加 | 107 |
| + /加 | 107 |
| '/引用 | 222 |
重要的是要注意，带有修饰键的本机键盘事件将与handlekeys中的公共键不匹配。例如，handleKeys = {'a']不会处理带有组合键的事件。 “ Ctrl”和“ a”。
修饰键-
通过使用ctrl + a或ctrl + 转移 + a格式的键名，可以通过将它们与通用键组合来处理这些键。要将+公共键与修饰键一起使用，请使用别名键“加号”。
<KeyboardEventHandler
handleKeys = {['ctrl + a']}
onKeyEvent = {（key，e）=>console.log（“仅在按下控制键的情况下处理“ a”键”）} />
| 键名 | 描述 |
| ctrl | 控制，Ctrl键 |
| 转移 | Shift键 |
| 元 | 元，cmd，Window，命令键 |
| alt | 选项，alt键 |
密钥集别名：
此功能提供了一种简单的方法来指定公用密钥集。当您要处理多个键并将每个键的所有处理和逻辑放在处理程序回调函数中时，此功能很有用。
<KeyboardEventHandler
handleKeys = {['数字']}
onKeyEvent = {（key，e）=>console.log（“仅处理数字键事件”）} />
| 别名 | 按键 | 描述 |
| “字母” | ‘a’，‘b’，…’z’ | 26个字母键 |
| '数字' | ‘0’，‘1’，….’9 | 10个数字键 |
| “字母数字” | ‘a’…’z’，‘0’…’9' | 36个字母数字键 |
| '功能' | ‘f1’…’f19’ | 19 Fn键 |
| '所有' | 不适用 | 所有键盘事件。如果按键事件与上面定义的任何通用按键都不匹配，则 关键参数 回调函数的值将为“其他”。您可以使用第二个参数（原始键事件对象）来实现自己的键处理逻辑。 |
高阶组件
这不是可以充分利用HoC的地方。
测试-
没有测试键盘事件的好方法，尤其是在使用酶时，因为它有两个主要限制：
1) 事件模拟仅限于浅层渲染
2) 不支持事件传播。