Remove event listener issue in react js

Question

const ControlPanel = ({ mainSectionRef }) => {
    const [canMove, setCanMove] = useState(false)
    const classes = useStyles();
    const toolbarRef = useRef();

    const onMouseMove = function (e) {
        const { x, y } = getMouseCoordinatesOnCanvas(e, mainSectionRef.current);
        toolbarRef.current.style.left = x +'px';
        toolbarRef.current.style.top = y + 'px';
    }

    const setCan = () => {
        setCanMove(!canMove)
    }

    if (mainSectionRef.current) {
        //issue is here!!!!
        mainSectionRef.current.removeEventListener('mousemove', onMouseMove, true)
        if (canMove) {
            mainSectionRef.current.addEventListener('mousemove', onMouseMove, true)
        }
    }

    return (
        <Toolbar ref={toolbarRef}>
           <RadioButtonUncheckedIcon />
           <CropSquareIcon />
           <ArrowRightAltIcon />
           <CloseIcon />
           <DragIndicatorIcon style={{ backgroundColor: canMove ? "red" : "inherit" }} onClick={setCan}/>
        </Toolbar >
    );
}
export default ControlPanel;

I'm trying to remove the event listener whenever there is a state change in the component. mainSectionref is a parent div and the control panel is the child component. I'm trying to move the control panel in the mainSection onClick of a button. The event does get added but on state change, it doesn't seem to remove the event listener. Can I know what's going wrong?.

Zohaib · Accepted Answer · 2020-04-02 15:29:40Z

1

You should use useEffect hook from react and put your addEventListener and removeEventListener code inside useEffect as first argument. useEffect takes second argument as dependency it means on what values change useEffect should call . In your case you want to call useEffect when ever canMove changes.

  useEffect(() => {
   if (mainSectionRef.current) {
   mainSectionRef.current.removeEventListener('mousemove', onMouseMove, true)
     if (canMove) {
     mainSectionRef.current.addEventListener('mousemove', onMouseMove, true)
    }
   }
  }, [canMove]);

also remember : import React, { useState, useEffect } from 'react';

answered Apr 2, 2020 at 15:29

Zohaib

1,03710 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RajKumar Jain Over a year ago

Hey Zohaib, thanks for the response. I appreciate the enhancement. Unfortunately, the problem still exists. The removeEventListener seems to be not working for some reason. It would be great if somebody could identify the issue. Thanks, zohaib for the suggestion though.

RajKumar Jain · Accepted Answer · 2020-04-07 04:58:13Z

0

useEffect(() => {
    function onMouseMove(e) {
        //Some code
    }
    if (mainSectionRef.current) {
        **mainSectionRef.current.onmousemove = null**;
        if (canMove) {
            mainSectionRef.current.onmousemove = e => onMouseMove(e);
        }
    }
}, [canMove])

The issue is resolved by using the key onmousemove. I still don't know why removeEventListener is not working in the above case.

edited Apr 7, 2020 at 4:58

answered Apr 6, 2020 at 10:02

RajKumar Jain

116 bronze badges

Collectives™ on Stack Overflow

Remove event listener issue in react js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related