Przesuwanie div'ów w React.js

Question

Cześć, piszę prostą apkę, która pozwoli mi kliknąć na element i go przesunąć na stronie. Napisałem komponent Spider, który ma być "chwytany" i przesuwany. Nie wiem jednak czemu po odkliknięciu (mouseup) komponent wciąż się przesuwa, mimo że dwa ostatnie consol.logi z funkcji handleMouseUp pokazują, że metoda przypisana do eventu onmouseup jest poprawnie zmieniana na null.

 

const Spider: React.FC<ISpiderProps> = ({ initTop, initLeft }) => {
  const [top, setTop] = useState(initTop);
  const [left, setLeft] = useState(initLeft);
  const myRef = useRef<HTMLDivElement>(null);

  // const handleMouseMove = (e: globalThis.MouseEvent) => {};

  const handleMouseUp = (e: globalThis.MouseEvent) => {
    console.log('handleMouseUp');
    e = e || window.event;
    e.preventDefault();
    if (!myRef || !myRef.current) return;
    document.onmousemove = null;
    document.onmouseup = null;

    // TODO everything is null, but the objects are still moving after no mouse up
    console.log(document.onmouseup, myRef.current.onmouseup);
    console.log(document.onmousemove, myRef.current.onmousemove);
  };

  const handleMouseDown = (e: globalThis.MouseEvent) => {
    e = e || window.event;
    e.preventDefault();
    if (!myRef || !myRef.current) return;

    let pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;

    // image position
    pos3 = e.clientX;
    pos4 = e.clientY;

    document.addEventListener('mouseup', handleMouseUp);

    document.addEventListener('mousemove', (e) => {
      console.log('mousemove');

      if (!myRef || !myRef.current) return;

      e = e || window.event;
      e.preventDefault();
      // calculate the new cursor position:
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;

      // set the element's new position:
      myRef.current.style.top = myRef.current.offsetTop - pos2 + 'px';
      myRef.current.style.left = myRef.current.offsetLeft - pos1 + 'px';
    });
  };

  useEffect(() => {
    if (!myRef || !myRef.current) return;

    myRef.current.addEventListener('mousedown', handleMouseDown);

    return () => {
      if (!myRef || !myRef.current) return;
      myRef.current.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mouseup', handleMouseUp);
      document.onmousemove = null;
    };
  }, [myRef]);
  console.log(document.onmouseup);

  return (
    <div
      ref={myRef}
      draggable
      className='spider'
      style={{ top: top, left: left }}></div>
  );
};

 

Answer 1

Dlaczego podpinasz eventy poza kontekstem Reacta, zamiast skorzystać z handlerów w JSX? Poza tym mieszasz event listener z event handlerem.

Nie jestem pewien, czy to jest przyczyną, ale wydaje mi się, że jeśli trzymasz referencje do listenerów w zmiennej myRef, to pomiędzy kolejnymi renderami komponentu, ta referencja nie jest tą samą, którą początkowo używasz do dodania listenera - same funkcje handleMouseDown i handleMouseUp są ponownie tworzone między renderami, więc ich referencje zmieniają się. Upewnij się przed usunięciem, czy to są te same referencje, bo w przeciwnym wypadku removeEventListener nie zadziała.

Przydało by się też, żebyś podaj o tyle więcej kodu, żeby można było go uruchomić i przetestować. Wrzuć reprodukowalny fragment na np. https://codesandbox.io/

Comments

Nie wykorzystywałem tych handlerów, ponieważ wczoraj miałem z nimi jakieś dziwne problemy i chciałem najpierw to zrobić w taki sposób: https://www.w3schools.com/howto/howto_js_draggable.asp
Jednak zrobiłem przed chwilą drugie podejście z użyciem tych właśnie reactowych handlerów i wszystko działa jak powinno.