React Draggable阻止子组件onClick触发问题求助

问题原因 #

React Draggable组件在处理拖拽交互时，会捕获并处理鼠标事件。当点击卡片内部的front或back元素时，事件会向上冒泡到Draggable的容器组件，拖拽逻辑会干扰内部点击事件的正常触发，最终导致Card组件的flip状态无法更新。

解决方法 #

以下两种方案可解决该问题，可根据实际需求选择：

方案1：阻止点击事件冒泡 #

在Card组件的点击事件中添加e.stopPropagation()，阻止事件传递到外层的Draggable组件，确保内部状态更新逻辑优先执行。

修改后的Card组件代码：

import { useState } from 'react'
import './Card.scss'

function Card() {
  const [flip, setFlip] = useState(false)

  const handleFlip = (e) => {
    e.stopPropagation();
    setFlip(!flip);
  }

  return (
      <div className={`card ${flip ? "flip" : ""}`}>
        <div className="front" onClick={handleFlip}>
          <h1>Front</h1>
        </div>
        <div className="back" onClick={handleFlip}>
          <h1>Back</h1>
        </div>
      </div>
  )
}

export default Card

方案2：配置Draggable的cancel属性 #

通过Draggable的cancel参数，指定不需要触发拖拽行为的元素选择器。点击匹配选择器的元素时，Draggable会忽略事件，让内部点击逻辑正常运行。

修改后的DraggableCard组件代码：

import Draggable from 'react-draggable'
import Card from './Card'

function DraggableCard() {
  return (
    <Draggable cancel=".card">
      <div>
        <Card />
      </div>
    </Draggable>
  )
}

export default DraggableCard

方案区别 #

• 方案1：保留卡片整体拖拽能力，点击卡片任意位置均可拖拽，同时点击正反面触发翻转。
• 方案2：点击.card区域时不会触发拖拽（仅能通过容器空白处拖拽），点击卡片内部仅触发翻转。

内容的提问来源于stack exchange，提问作者Thomas Mannion