How to stop event propagation in react?

Asked Jun 18 '17 at 18:01

Active Jun 18 '17 at 18:01

Viewed 1,486 times

I have tried doing e.stopPropagation(); and e.nativeEvent.stopImmediatePropagation();

This is what my code looks like for the child component:

class S extends React.Component {
  handleClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  }

  render() {
    return (
      <div class='box' onClick={this.handleClick.bind(this)}>
      </div>
    )
  }
}

But in the parent component, the event for click still gets triggered

Any ideas??
Thanks

asked Jun 18 '17 at 18:01

dylanpark

As a side point, `class` should be `className` – christopher Jun 18 '17 at 18:15
2

Possible duplicate of [How to call stopPropagation in reactjs?](https://stackoverflow.com/questions/35914680/how-to-call-stoppropagation-in-reactjs) – Nachshon Schwartz Jun 18 '17 at 18:17
Another point: if event propagation is the only thing you need to do in event handler, there is no reason to bind it, as event is passed as an argument. – Yuriy Yakym Jun 18 '17 at 20:18
I changed it to us `class` instead of `className`, and the reason for binding is for future purposes – dylanpark Jun 19 '17 at 14:37
@Nayish tried their soln but didn't work :S – dylanpark Jun 19 '17 at 14:51
Also just noticed that the parent's click event handler gets trigger first and not the child... – dylanpark Jun 19 '17 at 14:55

How to stop event propagation in react?

0 Answers0