react 监听键盘
时间: 2023-06-28 19:15:55 浏览: 137
键盘事件监听
3星 · 编辑精心推荐
要在 React 中监听键盘,可以使用 `onKeyDown` 事件。该事件会在用户按下一个键时触发,你可以在该事件的处理函数中检查按下的键是否是你所关心的键。
以下是一个简单的示例代码:
```jsx
import React from 'react';
function MyComponent() {
function handleKeyDown(event) {
if (event.key === 'Enter') {
console.log('Enter key was pressed');
}
}
return (
<div onKeyDown={handleKeyDown}>
Press Enter key to trigger the event
</div>
);
}
```
在上述示例中,我们定义了一个 `handleKeyDown` 函数来处理 `onKeyDown` 事件。如果用户按下的是 Enter 键,我们就会在控制台中输出一条消息。
然后,我们将该函数传递给一个 `div` 元素的 `onKeyDown` 属性,从而实现对键盘事件的监听。
阅读全文