如何实现FluentUI React的Card组件点击CardBottom时不触发onClick事件？

这是典型的事件冒泡问题——点击CardBottom内的按钮时，事件会向上传递到外层Card组件，触发其绑定的onClick逻辑。可以通过以下两种方式解决：

方法一：在CardBottom内部阻止事件冒泡 #

如果CardBottom是你可控的组件，推荐直接在触发onSave的按钮上添加阻止冒泡的逻辑，把事件拦截在子组件内部：

// CardBottom组件内部的保存按钮代码示例
<button
  onClick={(e) => {
    e.stopPropagation(); // 阻止事件向上冒泡到父级Card
    props.onSave(); // 执行原有保存逻辑
  }}
>
  保存
</button>

方法二：在Card的onClick中过滤点击区域 #

如果无法修改CardBottom组件，可以在Card的onClick事件里判断点击目标是否属于CardBottom区域，仅当点击区域非CardBottom时才执行onClicked：

<Card
  className={mergeClasses(styles.card, className)}
  onClick={(e) => {
    // 通过自定义属性定位CardBottom区域
    const targetInCardBottom = e.target.closest('[data-card-bottom]');
    if (!targetInCardBottom) {
      onClicked(id);
    }
  }}
>
  <CardContent {...props} />
  {/* 给CardBottom添加自定义标识属性 */}
  <CardBottom {...props} data-card-bottom onSave={() => onSaved(id)} />
</Card>

两种方式对比：

• 方法一逻辑更内聚，不会污染父组件代码，适合子组件可修改的场景；
• 方法二无需改动子组件，适合子组件为第三方或不可控的场景。

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