详解如何在React中有效地监听键盘事件

import React from 'react';

class MyComponent extends React.Component {
  handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('用户按下了回车键');
    }
  }

  render() {
    return (
      <div onKeyDown={this.handleKeyDown}>
        {/* 组件的内容 */}
      </div>
    );
  }
}

import React from 'react';

class MyForm extends React.Component {
  state = {
    inputValue: '',
    showError: false
  }

  handleInputChange = (event) => {
    const value = event.target.value;

    if (value.length >= 10) {
      this.setState({ showError: true });
    } else {
      this.setState({ showError: false });
    }

    this.setState({ inputValue: value });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleInputChange}
        />

        {this.state.showError && <p>输入的内容太长了！</p>}
      </div>
    );
  }
}

import React from 'react';

class NavigationMenu extends React.Component {
  state = {
    selectedMenuItem: null
  }

  handleKeyDown = (event) => {
    if (event.key === 'ArrowUp') {
      // 向上导航
    } else if (event.key === 'ArrowDown') {
      // 向下导航
    } else if (event.key === 'Enter') {
      // 选择菜单项
    }
  }

  render() {
    return (
      <ul onKeyDown={this.handleKeyDown}>
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
      </ul>
    );
  }
}