useKeyStroke
一个用于处理键盘按键操作的 React 钩子。
演示
尝试(长按)-
/=
来增加/减少计数器,-
会忽略重复事件(将 dedupe
设置为 true)。
用法
请查看 API。
源码
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
是一个联合类型,代表可以被定位的各种元素。
更多详情,请参见 ElementTarget 或 ElementTarget 类型。
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
。