React как тебя заставить при нажатии на дочерний элемент не отрабатывать onClick родительского?

Question

[Сергей Шевченко]

Всем привет, (мне кажется) вопрос банальный. Есть Родительский блок с отображением книги. Внутри есть чекбокс (для добавлении товара в сравнение) при клике на который карточка товара должна менять цвет (карточка товара - это родительский блок). Еще у каточки товара (внутри) есть изображение и блок с лайками.

Собственно сам вопрос: Как сделать что бы при нажатии на лайки не выделялась карточка товара для добавление в сравнение?
Или проще: Как при клике на дочерний элемент не отрабатывал onClick родительского?

Ссылка на Codepen: https://codepen.io/Lancer-Serega/pen/bKQapr?editor...

Желательно форкнуть проект и скинуть ссылку с исправлениями + прикрепить доку где про это можно почитать

Answer 1

[glem1337]

При клике на одном из узлов DOM, событие click "всплывает" вверх по дереву до тех пор пока не достигнет корня или не будет отменено в явном виде.

React передает в обработчик события "синтетический" объект события, который, помимо прочего имеет метод stopPropagate. Этот метод (как и его нативный аналог) останавливает дальнейшее "всплытие" события вверх по дереву DOM. Вот как можно использовать этот метод на практике:

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

Проще говоря вам надо применить e.stopPropagation(); при клике на нужный вам элемент(лайк)
Ссылка на вопрос на stackoverflow: https://ru.stackoverflow.com/questions/537267/reac...

Comments

[Сергей Шевченко]

Не помогло (поставил в метод upLike и downLike) в итоге лайки перестали считаться, а выделение родительского элемента по прежднему продолжилось((

[glem1337]

Вам нужно поставить сюда

downLike(e) {
        e.stopPropagation();
        this.setState(prevState => ({
            likes: prevState.likes > 0 ? --prevState.likes : 0
        }));
    }

[Сергей Шевченко]

Евгений Григорьев, Спасибо помогло!

Answer 2

[Ilya]

Отключите всплытие

Comments

[Сергей Шевченко]

Всмысле? У меня там нет никаких всплытий

[Иван]

Сергей Шевченко, учите js.

downLike(e) {
        e.stopPropagation();
        this.setState(prevState => ({
            likes: prevState.likes > 0 ? --prevState.likes : 0
        }));
    }

и с другим аналогично

[Сергей Шевченко]

Помогло, я затупил когда такоеже писал (забыл передать на вход сам евент а в методе его использовал)

[Сергей Шевченко]

Иван, И так учу потихоньку, т.к. все время бекенд разработкой занимался, а сейчас на работе так получилось что и фронт на меня упал да еще и на реакте написанный

[Ilya]

Сергей Шевченко, такое поведение называется всплытие, по этому я вам так и написал

[Иван]

Сергей Шевченко, тогда удачи :)