Estoy tratando de mover la pelota al punto donde hace clic el mouse. La función registra X e Y pero no mueve la bola. ¿Que me estoy perdiendo aqui?
Componente de reacción mecanografiado
const PlayArea = () => { let top = 'inherit'; let left = 'inherit'; document.addEventListener("click", function(e){ console.log((e.clientX + 25) + 'px') top = (e.clientY - 25) + "px"; console.log(top) left = e.clientX - 25 + "px"; }); return ( <> <div className="ball" style={{ transform: `top ${top}, left ${left}` }}></div> </> ); }; export default PlayArea;CSS
.ball { height: 100px; width: 100px; border-radius: 50%; background-color: #0b8027; position:absolute; }Configure sus variables top e left para indicar objetos y actualícelos en su devolución de llamada de evento de clic.
const [mouse, setMouse] = useState({}) useEffect(() => { const event = (e) => { setMouse({ top: `${e.clientY - 25}px`, left: `${e.clientX - 25}px` } document.addEventListener("click", event); }); return () => document.removeEventListener("click", event) }, []) return ( <> <div className="ball" style={{ top: mouse?.top, left: mouse?.left }}></div> </> ); No necesita transform sus propiedades de estilo top e left . Los configura directamente, y la position de los elementos le permitirá moverse a la ubicación que le dé.
También sería mejor agregar su detector de eventos en el montaje del componente y eliminarlo cuando el componente se desmonte con useEffect y la función de limpieza.
Para volver a renderizar el componente, debe utilizar el estado. Declare su variable superior e izquierda en el estado como se muestra a continuación y agregue el oyente enent una vez que su componente esté montado.
import { useEffect, useState } from 'react'; const PlayArea = () => { const [state, setState] = useState({ left: 'inherit', top: 'inherit', }); useEffect(() => { document.addEventListener('click', (e) => { setState({ left: `${e.clientX - 25}px`, top: `${e.clientY - 25}px` }); }); }, []); return ( <> <div className="ball" style={{ transform: `top ${state.top}, left ${state.left}` }} /> </> ); }; export default PlayArea; A medida que agrega su detector de eventos al objeto del documento, necesita tener la position: fixed a menos que tenga una clase relativa para el div que ha creado.
.ball { height: 100px; width: 100px; border-radius: 50%; background-color: #0b8027; position:fixed; }