按住react键并选择更改菜单高度

import React, { useState } from 'react';

const Menu = () => {
  const [menuHeight, setMenuHeight] = useState(100); // 初始菜单高度为100px

  const handleKeyDown = (event) => {
    if (event.key === 'Control') {
      setMenuHeight(200); // 当按下react键时，将菜单高度改为200px
    }
  };

  const handleKeyUp = (event) => {
    if (event.key === 'Control') {
      setMenuHeight(100); // 当释放react键时，将菜单高度恢复为100px
    }
  };

  return (
    <div
      style={{ height: `${menuHeight}px`, background: 'gray' }}
      onKeyDown={handleKeyDown}
      onKeyUp={handleKeyUp}
      tabIndex={0} // 使组件能够接收键盘事件
    >
      菜单内容
    </div>
  );
};

export default Menu;