import React, { useState } from "react";

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

  function handleMouseMove(event) {
    setPosition({ x: event.clientX, y: event.clientY });
  }

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        overflow: "hidden",
      }}
      onMouseMove={handleMouseMove}
    >
      <div
        style={{
          width: "50px",
          height: "50px",
          borderRadius: "50%",
          backgroundColor: "red",
          position: "absolute",
          top: position.y - 25,
          left: position.x - 25,
        }}
      />
    </div>
  );
}

export default BallFollowingMouse;

In this code, we define a functional component BallFollowingMouse that uses the React useState hook to manage the position of the ball. We create a handleMouseMove function that updates the state with the current mouse position whenever the mouse moves.

In the component's return statement, we render a container div with position: relative and overflow: hidden styles to constrain the ball's movement to the container. Inside this container, we render a div element for the ball itself. We set the ball's position using the state values and the same calculation as in the original code: top: position.y - 25 and left: position.x - 25.
นำเข้า React, { useState } จาก "react"; ฟังก์ชั่น BallFollowingMouse() { const [ตำแหน่ง, setPosition] = useState ({ x: 0, y: 0 }); ฟังก์ชั่น handleMouseMove (เหตุการณ์) { setPosition ({ x: event.clientX, y: event.clientY }); } ผลตอบแทน ( <div style={{ ตำแหน่ง: "ญาติ", ความกว้าง: "100%", ความสูง: "100%", ล้น: "ซ่อน", }} onMouseMove={handleMouseMove} > <div style={{ width : "50px", ความสูง: "50px", รัศมีเส้นขอบ: "50%", สีพื้นหลัง: "สีแดง", ตำแหน่ง: "สัมบูรณ์", ด้านบน: ตำแหน่ง.y - 25, ซ้าย: ตำแหน่ง.x - 25, }} /> </div> ); } ส่งออก BallFollowingMouse เริ่มต้น; ในโค้ดนี้ เรากำหนดส่วนประกอบการทำงาน BallFollowingMouse ที่ใช้ React useState hook เพื่อจัดการตำแหน่งของลูกบอล เราสร้างฟังก์ชัน handleMouseMove ซึ่งจะอัพเดตสถานะด้วยตำแหน่งเมาส์ปัจจุบันทุกครั้งที่เมาส์เคลื่อนที่ ในคำสั่ง return ของคอมโพเนนต์ เราเรนเดอร์ div คอนเทนเนอร์ด้วยตำแหน่ง: สัมพันธ์ และโอเวอร์โฟลว์: สไตล์ที่ซ่อนอยู่ เพื่อจำกัดการเคลื่อนไหวของลูกบอลไปยังคอนเทนเนอร์ ภายในคอนเทนเนอร์นี้ เราจะสร้างองค์ประกอบ div สำหรับลูกบอลเอง เรากำหนดตำแหน่งของลูกบอลโดยใช้ค่าสถานะและการคำนวณแบบเดียวกับในโค้ดดั้งเดิม: top: position.y - 25 และซ้าย: position.x - 25
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence