# @banzai-inc/react-key-handler 中文文档

规范地址：https://npmcn.com/package/%40banzai-inc/react-key-handler/

版本：1\.2\.0-beta\.6
npm 元数据更新时间：2024-02-14T17:36:25.371Z
中文译文更新时间：2026-11-07T16:42:05.003Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40banzai-inc/react-key-handler
原文对照：https://npmcn.com/package/%40banzai-inc/react-key-handler/?lang=original
项目主页：https://github.com/ayrton/react-key-handler
源码仓库：https://github.com/banzai-inc/react-key-handler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：59.1 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：3 个
- peer 依赖：react ^16\.2\.0-0 \|\| ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2023-05-18T20:49:05.877Z
- 最新版本发布：2024-02-14T17:36:25.006Z
- 近 30 天下载量：17315（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 0 个）

## 中文简介

处理键盘事件的反应组件

## 安装

```sh
npm install @banzai-inc/react-key-handler
```

也可以使用：`pnpm add @banzai-inc/react-key-handler`、`yarn add @banzai-inc/react-key-handler`、`bun add @banzai-inc/react-key-handler`

## README

# 反应键处理器qq

[![npm version](https://img.shields.io/npm/v/react-key-handler.svg)](https://www.npmjs.com/package/react-key-handler) [![License](https://img.shields.io/npm/l/react-key-handler.svg)](https://www.npmjs.com/package/react-key-handler) [![Build Status](https://travis-ci.org/ayrton/react-key-handler.svg?branch=master)](https://travis-ci.org/ayrton/react-key-handler)

反应组件处理键盘事件(例如 `keyup`, (中文(简体) ), `keydown` 打开 `keypress`) (中文(简体) ).

## Banzai 的更改 :

更新了对等依赖, 支持反应 17, 因为我们已经在反应 17 上运行了一段时间 . 这个软件包最终需要被一些不同的东西所取代,作为我们升级的一部分.

## 目录

-   [反应键处理器qq](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-react-key-handler-)
    -   [Banzai 的更改 :](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-changes-for-banzai)
    -   [目录](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-table-of-contents)
    -   [安装](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-installation)
    -   [使用量](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-usage)
        -   [高序组件](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-higher-order-components)
        -   [构成部分](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-component)
        -   [窗体密钥处理](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-form-key-handling)
    -   [关键事件名称](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-key-event-names)
    -   [`keyValue`, (中文(简体) ), `code` 财务报告和审定财务报表 `keyCode`](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-keyvalue-code-and-keycode)
    -   [发展](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-development)
        -   [设置](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-setup)
        -   [开始](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-getting-started)
        -   [测试](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-tests)
    -   [捐款](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-contributing)
    -   [许可证](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-license)

## 安装

```sh
$ npm install react-key-handler --save
```

## 使用量

你用得着 `react-key-handler` 库,分两种花式:

-   [高序组件](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-higher-order-components)
-   [组件](https://npmcn.com/package/%40banzai-inc/react-key-handler/#readme-component)

### 高序组件

这个库包括两个相近的更高级组件,但有一个不同的puprose:

| 上级单位 | 目的 |
| --- | --- |
| `keyHandler` | 处理密钥更改 |
| `keyToggleHandler` | 处理密钥切换 |

两者都具有相同的API,并将给定的组件装饰有: `keyValue`, (中文(简体) ), `code` 财务报告和审定财务报表 `keyCode` 属性.

内部 `KeyHandler` 使用组件,以便充分理解 检查出来 [执行情况](https://npmcn.com/package/%40banzai-inc/react-key-handler/lib/key-handler.js)。 。 。 .

```jsx
import React from 'react';
import { keyHandler, KEYPRESS } from 'react-key-handler';

function Demo({ keyValue }) {
  return (
    <div>
      {keyValue === 's' && (
        <ol>
          <li>hello</li>
          <li>world</li>
        </ol>
      )}
    </div>
  );
}

export default keyHandler({ keyEventName: KEYPRESS, keyValue: 's' })(Demo);
```

道具类型 `KeyHandler` 构成部分是:

| 名称 | 类型 | 需求 | 默认 |  |
| --- | --- | --- | --- | --- |
| 密钥事件Name | 字符串 | 没有 | `'keyup'` | `'keydown'`, (中文(简体) ), `'keypress'` 或者说 `'keyup'` |
| 键值 | 字符串 | 对 **\* 联合国** |  | 任何给定 [键盘Event.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) |
| 代码 | 字符串 | 对 **\* 联合国** |  | 任何给定 [键盘Event.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) |
| 密钥代码 | 编号 | 对 **\* 联合国** |  | 任何给定 [键盘Event.keyCode](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) |

**\* 联合国** 你应该通过至少一个这样的道具.

页:1 _说明_ 键代码经常是浏览器特定,因此被设定为 已贬值,见 [详细信息 MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)。 。 。 .

[实例](https://npmcn.com/package/%40banzai-inc/react-key-handler/demo/components/examples/decorators/)

### 构成部分

```jsx
import React from 'react';
import KeyHandler, { KEYPRESS } from 'react-key-handler';

export default class Demo extends React.Component {
  state = { showMenu: false };

  render() {
    const { showMenu } = this.state;

    return (
      <React.Fragment>
        <KeyHandler
          keyEventName={KEYPRESS}
          keyValue="s"
          onKeyHandle={this.toggleMenu}
        />

        {showMenu && (
          <ol>
            <li>hello</li>
            <li>world</li>
          </ol>
        )}
      </React.Fragment>
    );
  },

  toggleMenu = (event) => {
    event.preventDefault();

    this.setState({ showMenu: !this.state.showMenu });
  };
}
```

道具类型 `KeyHandler` 构成部分是:

| 名称 | 类型 | 需求 | 默认 |  |
| --- | --- | --- | --- | --- |
| 密钥事件Name | 字符串 | 没有 | `'keyup'` | `'keydown'`, (中文(简体) ), `'keypress'` 或者说 `'keyup'` |
| 键值 | 字符串 | 对 **\* 联合国** |  | 任何给定 [键盘Event.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) |
| 代码 | 字符串 | 对 **\* 联合国** |  | 任何给定 [键盘Event.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) |
| 密钥代码 | 编号 | 对 **\* 联合国** |  | 任何给定 [键盘Event.keyCode](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) |
| 关键汉字 | 函数 | 对 |  | 处理键时调用的函数 |

**\* 联合国** 你应该通过至少一个这样的道具.

页:1 _说明_ 键代码经常是浏览器特定,因此被设定为 已贬值,见 [详细信息 MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)。 。 。 .

[示例](https://npmcn.com/package/%40banzai-inc/react-key-handler/demo/components/examples/component/index.js)

### 窗体密钥处理

此库不处理窗体元素的关键事件, 如 `<input />` 财务报告和审定财务报表 `<textarea />`。 。 。 .

反应做得很好 支持这些已经通过 [键盘事件](https://reactjs.org/docs/events.html#keyboard-events)。 。 。 .

[实例](https://npmcn.com/package/%40banzai-inc/react-key-handler/demo/components/examples/input/)

## 关键事件名称

TODO:解释不同关键事件的差异.

## `keyValue`, (中文(简体) ), `code` 财务报告和审定财务报表 `keyCode`

现有的三项主要活动是:

-   `keyValue` 这符合真正的价值。 这是按键的值 在考虑修改键状态的同时 例如 `shiftKey` 以及键盘定位/显示
-   `code` 这与键盘上的物理键(相对于 通过按下键生成的字符). 换句话说,这个财产 返回未被键盘布局或状态所改变的值 修改键。 值是按键特有的字符串,例如“ 数字0 ”
-   `keyCode` 这类似于代码,但数字和 _已贬值_。 。 。 .

我们建议您使用新的Web标准 [键盘Event.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) 或 [键盘Event.code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) 以被掠夺者发誓 [键盘Event.keyCode](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode)。 。 。 .

请注意 **反应** `key` 是一个保留的财产,因此我们使用 `keyValue` 引用时 页:1 `key` 属性.

**浏览器支持 :**

不需要担心浏览器的支持,因为我们内部正常 已贬值的 HTML5 `keyValue` 价值和从遗产中翻译 `keyCode` 数值, 类似于反应如何为他们 `SyntheticKeyboardEvent`。 。 。 .

**详情:**

[W3C 工作草案](https://www.w3.org/TR/DOM-Level-3-Events-key/)。 。 。 .

## 发展

### 设置

```sh
$ git clone <this repo>
$ cd react-key-handler
$ npm install
```

### 开始

要启动服务器 :

```sh
$ npm demo
```

这将启动一个开发服务器, 它会在您更改文件时自动重建演示应用程序, 并支持热模块替换以快速开发 :

```sh
$ open http://localhost:1234
```

### 测试

进行所有测试:

```sh
$ npm test
```

或者您可以单独运行 Linters, 单位测试和检查类型错误 :

```sh
$ npm run test:lint
$ npm run test:unit
$ npm run test:flow
```

## 捐款

GitHub上欢迎错误报告和拉出请求. 这个项目的目的是: 安全、欢迎合作的空间,预期捐助者将遵守 页:1 [《促进者公约》](http://contributor-covenant.org/) 行为守则.

## 许可证

```
 _________________
< The MIT License >
 -----------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
```

## 常见问题

### @banzai-inc/react-key-handler 是什么？

处理键盘事件的反应组件

### 如何安装 @banzai-inc/react-key-handler？

在项目目录运行 npm install @banzai-inc/react-key-handler，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.2\.0-0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @banzai-inc/react-key-handler 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/banzai-inc\_\_react-key-handler 是否存在。

### @banzai-inc/react-key-handler 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @banzai-inc/react-key-handler 可以商用吗？

@banzai-inc/react-key-handler 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @banzai-inc/react-key-handler 的下载量有多少？

根据 npm 官方下载统计，@banzai-inc/react-key-handler 在 2026/10/08 – 2026/11/06 这 30 天内被下载 17,315 次，日均约 577 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @banzai-inc/react-key-handler 还在维护吗？

最新版本 1\.2\.0-beta\.6 发布于 2024/02/15（2 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/05/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。