How to call stopPropagation in reactjs?
ReactjsReactjs Problem Overview
I want to stop the click event from bubling up. Therefore I added e.stopPropagation() in my code. I always get a mistake in the console, that says: Uncaught TypeError: e.stopPropagation is not a function
What is the right way to set the stopPropagation in reactjs?
handleClick: function(index, e) {
e.stopPropagation();
...
},
Reactjs Solutions
Solution 1 - Reactjs
The right way is to use .stopPropagation
,
var Component = React.createClass({
handleParentClick: function() {
console.log('handleParentClick');
},
handleChildClick: function(e) {
e.stopPropagation();
console.log('handleChildClick');
},
render: function() {
return <div onClick={this.handleParentClick}>
<p onClick={this.handleChildClick}>Child</p>
</div>;
}
});
> Your event handlers will be passed instances of SyntheticEvent, a
> cross-browser wrapper around the browser's native event. It has the
> same interface as the browser's native event, including
> stopPropagation() and preventDefault(), except the events work
> identically across all browsers.
> Event System