react组件式写法,如何监听到键盘事件

在 React 组件中，可以使用内置的事件处理函数来监听键盘事件。具体步骤如下：

1. 创建一个类组件，继承自 React.Component。
2. 在类组件中定义一个键盘事件监听函数。
3. 在组件的生命周期方法 componentDidMount 中，使用 addEventListener 方法将键盘事件与监听函数绑定。
4. 在组件的生命周期方法 componentWillUnmount 中，使用 removeEventListener 方法将键盘事件解绑。
5. 在监听函数中，可以使用 event 对象来获取键盘事件的相关信息，如按下的键码等。

下面是一个示例代码，演示了如何在 React 组件中监听键盘事件：

import React from 'react';

class KeyboardComponent extends React.Component {
  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyDown);
    // 在整个文档范围内监听键盘按下事件
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown);
    // 在组件卸载时解绑事件
  }

  handleKeyDown = (event) => {
    console.log('键码:', event.keyCode);
    // 处理键盘按下事件，可以在此处执行相应的逻辑
  }

  render() {
    return (
      <div>
        <h1>键盘事件监听</h1>
      </div>
    );
  }
}

export default KeyboardComponent;

在上述示例中，我们在 componentDidMount 生命周期方法中使用 addEventListener 方法将键盘的 keydown 事件与 handleKeyDown 函数进行绑定。在 handleKeyDown 函数中，我们可以根据按下的键码来执行相应的逻辑。当组件被卸载时，会执行 componentWillUnmount 生命周期方法，在该方法中使用 removeEventListener 方法将事件解绑。