Disable onClick event on a FluentUI React component

Question

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?

Mamun · Accepted Answer · 2023-09-09 04:00:24Z

1

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);
  }}
/>

answered Sep 9, 2023 at 4:00

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3587624 Over a year ago

Worked like a charm! Marking as valid answer

Collectives™ on Stack Overflow

Disable onClick event on a FluentUI React component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related