三行代码  ›  专栏  ›  技术社区  ›  user3587624

禁用FluentUI React组件上的onClick事件

  •  0
  • user3587624  · 技术社区  · 2 月前

    我有一个定义如下的Card Fluent UI组件

        <Card className={mergeClasses(styles.card, className)} onClick={() => onClicked(id)} >
            <CardContent {...props} />
            <CardBottom {...props} onSave={() => onSaved(id)} />
        </Card >
    

    这个 onClick() 方法需要在 Card 组件级别,但我不想在单击 CardBottom 区域,因为它包含正在执行自己事件的其他按钮( onSaved )。

    有没有办法让我跳过跑步 onClick 当单击发生在 CardBottom 组成部分

    1 回复  |  直到 2 月前
        1
  •  1
  •   Mamun    2 月前

    您可以在中停止事件的传播 CardBottom 组件的事件处理程序。

    更改:

    <CardBottom {...props} onSave={() => onSaved(id)} />
    

    收件人:

    <CardBottom
      {...props}
      onSave={(event) => {
        event.stopPropagation(); //stop the propagation
        onSaved(id);
      }}
    />