How to change css in react in this example?-CodePudding

I am trying to move the ball to the point where the mouse clicks. The function is logging the X and Y but not moving the ball. What am I missing here?

Typescript react component

  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;

}

CodePudding user response：

Set your top and left variables to state objects and update them on your click event callback.

const [mouse, setMouse] = useState({})

useEffect(() => {
  const event = document.addEventListener("click", function (e) {
    setMouse({ top: `${e.clientY - 25}px`, left: `${e.clientX - 25}px` });
  });
  return () => document.removeEventListener("click", event)
}, [])

return (
    <>
      <div className="ball" style={{ top: mouse?.top, left: mouse?.left }}></div>
    </>
);

You don't need to transform your top and left style properties. You set them directly, and the elements position will allow it to move to the location you give it.

It would also be best to add your event listener on component mount, and remove it when the component unmounts with useEffect and the cleanup function.

CodePudding user response：

In order to rerender the component you need to make use of the state. Declare your top and left variable in state like below and add the enent listener once your component is mounted.

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;

As you are adding your event listener to the document object you need to have the position: fixed unless you have a relative class for the div you have created.

.ball {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #0b8027; 
  position:fixed;

}