javascriptreactjstypescriptfluent-uifluentui-react

Disable onClick event on a FluentUI React component

I have a Card Fluent UI component defined like this

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

The onClick() method needs to be defined at the Card component level, but I don't want to run this onClick event when clicking on the CardBottom area since that contains other button that is executing its own event (onSaved).

Is there a way I can skip running the onClick event when the click happens in the CardBottom component?

Solution

  • You can stop the propagation of the event in CardBottom component's event handler.

    Change:

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

    To:

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