useKeyStroke

Tags:

一个用于处理键盘按键操作的 React 钩子。

演示

尝试(长按)-/= 来增加/减少计数器,- 会忽略重复事件(将 dedupe 设置为 true)。

源码
Count:
0
↓ / -
↑ / =

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

// 捕获所有按键操作 const stop = useKeyStroke(handler, options) // 捕获特定按键操作 const stop = useKeyStroke(keyFilter, handler, options)

键过滤器 KeyFilter

查看所有键盘事件的键,请参阅 MDN

export type KeyFilter = true | string | string[] | KeyPredicate

处理器 Handler

export type UseKeyStrokeHandler = (event: KeyboardEvent) => void

选项 Options

ElementTarget 是一个联合类型,代表可以被定位的各种元素。

更多详情,请参见 ElementTargetElementTarget 类型

export type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup' export type UseKeyStrokeOptions = { /** * 要监听的事件名称。 * * @defaultValue 'keydown' */ eventName?: KeyStrokeEventName /** * 添加事件监听器的目标。 * * @defaultValue () => window */ target?: ElementTarget | (() => Window) | (() => Document) /** * 设置为 `true` 以使用被动事件监听器。 * * @defaultValue false */ passive?: boolean /** * 设置为 `true` 以忽略按键长按时的重复事件。 * * @defaultValue false */ dedupe?: boolean }

返回值

一个可以被调用以停止监听按键操作的 function