lancer_serega
@lancer_serega
PHP Developer

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

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

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

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

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

5b35094a34f19104007248.png
  • Вопрос задан
  • 720 просмотров
Решения вопроса 1
glem1337
@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...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ilyapashkov02
Frontend Developer
Отключите всплытие
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы