reactjs - React，拖动后如何防止执行点击事件？

Question

我有 Draggable 元素，在它的内部，我有一个带有 onClick 事件的组件。拖动结束时，触发点击事件。 我的可拖动元素看起来像这样。我使用了一个名为 react-draggable 的包.

<Draggable
    position={this.state.realPosition}
    onStart={this.handleStart}
    onDrag={this.handleDrag}
    onStop={this.handleStop}
    disabled={this.state.isDialogOpen}
    bounds="parent">
      <div style={{"width":"fit-content"}}>
        <Helmet getDialogStatus={this.handleClick} />  
      </div>
</Draggable>

我在 Helmet 组件中有 onClick 事件，它会打开一个对话框。当我拖动并释放元素时，此对话框打开。我的问题是如何防止此操作以及如何将它们与事件分开？

谢谢。

Answer 1

const [isDragging, setIsDragging] = useState<any>(false);

const eventControl = (event: { type: any; }, info: any) => {


    if (event.type === 'mousemove' || event.type === 'touchmove') {
      setIsDragging(true)
    }

    if (event.type === 'mouseup' || event.type === 'touchend') {
      setTimeout(() => {
        setIsDragging(false);
      }, 100);

    }
  }

然后，

<Draggable
    bounds="parent"
    onDrag={eventControl}
    onStop={eventControl}
> ...