Question

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

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

 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;
    
}, []);

所以第一个问题是事件 - enter、over 和 drop 根本没有触发。同时开始和离开火2-4次。

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

不确定我做错了什么。

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

0 个答案: