react 如何通过按键盘控制 button 得 press 和 release

在 React 中，你可以通过监听键盘事件来控制按钮的按下（press）和释放（release）。你可以使用 onKeyDown 和 onKeyUp 事件来实现这个功能。

下面是一个简单的示例，展示如何通过按键盘上的特定按键来控制按钮的按下和释放状态：

import React, { useState, useEffect } from 'react';

const KeyboardControlButton = () => {
  const [isPressed, setIsPressed] = useState(false);

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'Enter') { // 可以根据需要更改按键
        setIsPressed(true);
      }
    };

    const handleKeyUp = (event) => {
      if (event.key === 'Enter') {
        setIsPressed(false);
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);

    // 清除事件监听器
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, []);

  return (
    <button style={{ backgroundColor: isPressed ? 'blue' : 'gray' }}>
      {isPressed ? 'Pressed' : 'Released'}
    </button>
  );
};

export default KeyboardControlButton;

代码说明：

1. useState Hook: 用于管理按钮是否被按下的状态 (isPressed)。

2. useEffect Hook: 用于添加和清除键盘事件监听器。组件加载时，useEffect 会添加 keydown 和 keyup 事件监听器。

3. handleKeyDown 和 handleKeyUp 函数:

   • handleKeyDown: 当检测到按下指定按键（如 "Enter"）时，将 isPressed 状态设置为 true。
   • handleKeyUp: 当检测到释放指定按键时，将 isPressed 状态设置为 false。

4. 按钮的样式和文本: 根据 isPressed 状态动态改变按钮的背景颜色和文本。

你可以根据需要修改按键的类型（例如从 "Enter" 改为 "Space" 或其他键）。只需更改 event.key === 'Enter' 中的 'Enter' 为你期望的键名即可。