@accessible/use-key 中文文档教程
useKey()
npm i @accessible/use-key
用于处理特定 event.key 值上的 keydown 事件的 React 挂钩。 它也是 将来自 IE 的非标准 event.key 值规范化为现代等效值。
Quick Start
```jsx和谐 从“反应”导入*作为反应 import useKey
从 '@accessible/use-key' const Component = () => { const ref = React.useRef(null)
// 监听上面 ref 的 keydown 事件 使用密钥（参考，{ // 当按下 Escape 键时记录事件 转义：console.log, // 按下 Enter 时将“Key was pressed: Enter”记录到控制台 输入：（事件）=> console.log('按键被按下：', event.key), })
// 监听窗口上的按键事件 使用键（窗口，{ // 当按下 Escape 键时记录事件 转义：console.log, // 按下 Enter 时将“Key was pressed: Enter”记录到控制台 输入：（事件）=> console.log('按键被按下：', event.key), })
返回
API
useKey(target, handlers)
Arguments
| Argument | Type | Required? | Description |
|---|---|---|---|
| target | React.RefObject<T> | T | Window | Document | null | Yes | A React ref, element, window, or document to add the key listener to |
| handlers | Record<string, (event?: KeyboardEvent) => any> | Yes | A mapping with keys matching the event.key string you want to listen on. The value for each key should be an event listener. |
Returns void
LICENSE
麻省理工学院
useKey()
npm i @accessible/use-key
A React hook for handling keydown events on specific event.key values. It also normalizes non-standard event.key values from IE to their modern equivalents.
Quick Start
```jsx harmony import * as React from 'react' import useKey from '@accessible/use-key'
const Component = () => { const ref = React.useRef(null)
// Listens to keydown events on the ref above useKey(ref, { // Logs event when the Escape key is pressed Escape: console.log, // Logs "Key was pressed: Enter" to the console when Enter is pressed Enter: (event) => console.log('Key was pressed:', event.key), })
// Listens to keydown events on the window useKey(window, { // Logs event when the Escape key is pressed Escape: console.log, // Logs "Key was pressed: Enter" to the console when Enter is pressed Enter: (event) => console.log('Key was pressed:', event.key), })
return
API
useKey(target, handlers)
Arguments
| Argument | Type | Required? | Description |
|---|---|---|---|
| target | React.RefObject<T> | T | Window | Document | null | Yes | A React ref, element, window, or document to add the key listener to |
| handlers | Record<string, (event?: KeyboardEvent) => any> | Yes | A mapping with keys matching the event.key string you want to listen on. The value for each key should be an event listener. |
Returns void
LICENSE
MIT
接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。