如何解决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;
},[]);
所以第一个问题是事件 - enter、over 和 drop 根本没有触发。 同时开始和离开火2-4次。
我发现的所有解决方案都在谈论 e.stopPropagation() 和 e.preventDefault() 但它们似乎对我的代码没有影响。
不确定我做错了什么。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。