简介
@mapbox/react-keybinding 是一个基于 React 的键盘绑定库，它可以让我们轻松地为 React 组件绑定键盘事件。它使用了 Mapbox 的 keymaster 库来处理键盘事件，因此可以处理所有现代浏览器中的键盘事件。
安装
可以通过 npm 进行安装：
npm install @mapbox/react-keybinding
使用方法
首先，在需要使用键盘事件的 React 组件中引入 @mapbox/react-keybinding：
import Keybinding from '@mapbox/react-keybinding';
然后，在该组件的 render() 函数中使用 Keybinding 组件，将键盘事件与响应函数绑定：
render() {
return (
<div>
<Keybinding keyEventName="keydown" keyCode={75} handler={() => this.handleClick()} />
<button onClick={() => this.handleClick()}>Click Me!</button>
</div>
);
}在上面的例子中，我们将按下键码为 75 的键（即 K 键）与 handleClick() 函数绑定。当用户按下 K 键时，handleClick() 函数将被触发。如果用户点击了 "Click Me!" 按钮，handleClick() 函数也会被触发。
属性
Keybinding 组件可以接受以下属性：
keyEventName
Type: string
键盘事件名称。可以是 "keydown"、"keyup" 或 "keypress"。
keyCode
Type: number or array
表示需要绑定的键码或键码数组。当 keyEventName 属性的值为 "keydown" 或 "keyup" 时，keyCode 是一个整数；当 keyEventName 属性的值为 "keypress" 时，keyCode 可以是包含多个整数的数组。
handler
Type: function
当按下键码或键码数组时要执行的函数。
onKeyHandler
Type: function
当按下键码或键码数组时要执行的函数。与 handler 属性相同，但是也包括了 event 对象。
inputOnly
Type: bool
如果为 true，则只允许在 input 或 textarea 中触发按键事件。
inputBeforeKeyPress
Type: bool
如果为 true，则在 keypress 事件之前触发 input 事件。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- ---------------------------
----- ----------- ------- --------- -
------------- -
---------------- - --- ------- -- ------ --- ----------
-
------------------ -
------------------ --- --- ----------
-
-------- -
------ -
-----
----------- ---------------------- ------------ ----------- -- ------------------- --
----------- ----------------------- -------------- ----------- -- ------------------------ --
------ ----------- --
------- ----------- -- ------------------------- ------------
------
--
-
-
------ ------- ------------上面的代码演示了如何使用键盘事件绑定和在 input 中限制触发按键事件。当用户按下 K 键或点击 "Click Me!" 按钮时，handleClick() 函数将被触发。当用户按下 Enter 键时，handleEnterPress() 函数将被触发。另外，当在 input 中按下按键时，事件将被忽略。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446c8