How to control multiple events on React Material UI Element

user_6253707 0
Viewed 162

I have a Material UI Switch Component where I would like to detect click events on and be able, in certain circumstances, to prevent the change event from firing.

What would be the best way to do this?

I've used event.preventDefault to prevent events from bubbling up to parent component event listeners before, but in this case I have two events on the same Component/element and I want one to fire before the other and potentially prevent the other from firing.

Here's a codePen of what I've tried.

material-ui reactjs javascript
1 Answers

I've got it to work. Rather than have two events on the same element/component and try to orchestrate their order, I realized that its better to just have a click listener and let that call the change event for the Switch if the conditions are met. Here is a codepen with the solution.

The <Switch /> component only has an onClick event which opens a Dialog to detect whether to enact the change event. Much easier.

user_62537070
Related