React中击键时的有效元素移动

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

const App = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleKeyPress = (e) => {
      const { keyCode } = e;
      switch (keyCode) {
        case 37: // 左箭头键
          setPosition((prevPosition) => ({ ...prevPosition, x: prevPosition.x - 10 }));
          break;
        case 38: // 上箭头键
          setPosition((prevPosition) => ({ ...prevPosition, y: prevPosition.y - 10 }));
          break;
        case 39: // 右箭头键
          setPosition((prevPosition) => ({ ...prevPosition, x: prevPosition.x + 10 }));
          break;
        case 40: // 下箭头键
          setPosition((prevPosition) => ({ ...prevPosition, y: prevPosition.y + 10 }));
          break;
        default:
          break;
      }
    };

    window.addEventListener('keydown', handleKeyPress);

    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, []);

  return (
    <div
      style={{
        position: 'absolute',
        left: position.x,
        top: position.y,
        width: '100px',
        height: '100px',
        background: 'red',
      }}
    />
  );
};

export default App;