时间戳

首页 > 解决方案 > REACT-拖动事件触发多次（默认阻止）

reactjs - REACT-拖动事件触发多次（默认阻止）

问题描述

所以我有一个带有单元格组件的网格，我需要它们与拖动效果进行交互。

这就是我添加监听器的方式

 useEffect(() => {
    window.addEventListener('mouseup', onDragLeave);
    window.addEventListener('dragstart', onDragStart);
    window.addEventListener('dragenter', onDragEnter);
    window.addEventListener('dragover', onDragOver);
    window.addEventListener("drop", onDrop);
    }, []);

我也尝试在设置监听器后删除它们，如下所示

-`useEffect(() => {
        window.addEventListener('mouseup', onDragLeave);
        window.addEventListener('dragstart', onDragStart);
        window.addEventListener('dragenter', onDragEnter);
        window.addEventListener('dragover', onDragOver);
        window.addEventListener("drop", onDrop);
            return(()=>{
                window.removeEventListener('mouseup', onDragLeave);
                window.removeEventListener('dragstart', onDragStart);
                window.removeEventListener('dragenter', onDragEnter);
                window.removeEventListener('dragover', onDragOver);
                window.removeEventListener("drop", onDrop);
            })
        }, [onDragLeave,onDragStart,onDragEnter,onDragOver,onDrop]);

`

这是我的功能的一个例子（看起来都一样）

const onDragOver = useCallback((e) => {
 
    e.stopPropagation();
    e.preventDefault(); 
    console.log("over")
    return false;
    
}, []);

所以第一个问题是事件——进入、结束和放下根本没有触发。同时启动和离开火2-4次。

我发现的所有解决方案都在谈论 e.stopPropagation() 和 e.preventDefault() 但它们似乎对我的代码没有影响。

不知道我做错了什么。

标签： reactjsevent-handlingmouseevent

解决方案

推荐阅读