React - 移除事件监听器onmousedown -> onmousemove

问题描述

我有可以拉伸的元素 - 当我拖动 .leftMove 时它会改变父级的左侧位置和宽度，而当拖动 .rightMove 时它会改变父级的宽度。

问题是我无法删除 mouseUp 上的事件侦听器。它仍然存在，我设法在第二次鼠标悬停时删除了事件，但是元素在第一次鼠标悬停时意外更改大小仍然是一个大问题。

return (
        <Fragment>
            <div className="leftMove" 
                onMouseDown={mouseDownLeft} 
                onMouseUp={MouseUp} 
                onMouseLeave={MouseUp}></div>
            <div className="rightMove"  
                onMouseDown={mouseDownRight} 
                onMouseUp={MouseUp} 
                onMouseLeave={MouseUp}>
            </div>
        </Fragment>)

const resize = (e) => {
        
        ...change width and position left...
        let thisone = e.target;
        thisone.removeEventListener("mousemove",resize,false);
        
        thisone.onmouseup = function() {
            console.log('removed');
            thisone.removeEventListener("mousemove",false); 
        };

        thisone.onmouseleave = function() {
            console.log('removed by leave');
            thisone.removeEventListener("mousemove",false); //working on leave and comeback second time
            thisone.removeEventListener("onmousedown",false); 
        };
    };

const MouseUp = (e) => {
      
        e.target.removeEventListener("mousemove",false); //not working at all

        //update global state,it's update elements I am changing width,leftpos

        setState(prevsetState => ({
            ...prevsetState,fromSetting: {
                ...prevsetState.fromSetting,mods: filteredDataSource
            }
        }));
  

    }

const mouseDownLeft = (e) => {
        //determining left right move
    
        e.target.addEventListener("mousemove",false);
      
    }

解决方法

这是我的失误。我听父元素并尝试按子元素调整它的大小，然后从子元素中删除事件侦听器（但它正在侦听父元素）

const mouseDownRight = (e) => {

        console.log('downright');

        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();

        //let grabbing = e.target.closest('.elementtoresize'); <-mistake

        let grabbing = e.target; // right element to listen to

        m_pos = e.clientX;

        exDirect = -1;
        grabbing.addEventListener("mousemove",resize,false);
      
    }