在react应用程序中使用react-draggable库时，如何防止在拖动时触发onClick和单击时触发OnStar

Question

import Draggable from 'react-draggable'
const [open, setOpen] = useState(false)
const [dragging, setDragging] = useState(false)
const toggleOpen = (e) => {
if(!dragging){
setOpen(!open);
}
}
const handleStart = (e) => {
setDragging(true)
}
const handleStop = (e) => {
setTimeout(function(){setDragging(false)},500);
}
<Draggable onDragStart={handleStart} onDragEnd={handleEnd}>
open ?
<SomeComponent>
:
null
<Launcher onClick={toggleOpen} />
</Draggable>

单击Launcher组件时，触发onDragStart和onDragEnd事件，反之亦然。我在所有函数调用中尝试了e.preventDefault()和e.stopPropagation()和return false的所有组合，但没有工作。以某种方式，我需要保持这些事件分开，用户应该能够单击Launcher组件和SomeComponent应该出现。此外，用户应该能够拖动Launcher，但当完成拖动SomeComponent不应该出现。

Answer 1

建议如下:https://github.com/react-grid-layout/react-draggable/issues/49#issuecomment-517212934

import Draggable from 'react-draggable'
const [open, setOpen] = useState(false)
const [dragging, setDragging] = useState(false)
const handleStart = () => {
setDragging(true);
};
const handleStop = () => {
setTimeout(function(){setDragging(false)},500);
if (!dragging) {
setOpen(!open);
}
};
<Draggable onDrag={handleStart} onStop={handleStop}>
open ?
<SomeComponent>
:
null
<Launcher />
</Draggable>

我假设Launcher是Draggable中唯一可点击的组件，所以点击Draggable等同于点击Launcher