React how do you force when you click on a child element not to process the onClick of the parent?

Question

JavaScript

Hello everyone, (I think) the question is banal. There is a Parent block with a book display. Inside there is a checkbox (to add a product to comparison) when clicked, the product card should change color (the product card is a parent block). The product roll (inside) also has an image and a block with likes.
Actually the question itself: How to make sure that when you click on the likes, the product card is not highlighted for adding to the comparison?
Or more simply: How did the onClick of the parent element not work when clicking on a child element?
Link to Codepen: https ://codepen.io/Lancer-Serega/pen/bKQapr?editor...

Answer 1

When one of the DOM nodes is clicked, the click event "bubbles" up the tree until it reaches the root or is explicitly cancelled.
React passes a "synthetic" event object to the event handler, which, among other things, has a stopPropagate method. This method (like its native counterpart) stops the event from bubbling further up the DOM tree. Here's how you can use this method in practice:

var Block = React.createClass({
    handleClose: function(e) {
        e.stopPropagation();
        alert('close');
    },
    handleClick: function(e) {
        alert('click');
    },
    render: function() {
        return (
            <div onClick={this.handleClick}>
                <span>Foo Bar Baz</span>
                <span onClick={this.handleClose}> &#215;</span>
            </div>
        );
    }
});

Simply put, you need to apply e.stopPropagation();when clicking on the element you need (like)
Link to the question on stackoverflow: https://ru.stackoverflow.com/questions/537267/reac...

Answer 2

Disable popup