Как НЕ передать событие нажатия детям?

Question

Я использую material-ui.

В этом коде https://codesandbox.io/s/y4jwv4ry1

1. У меня есть один родительский компонент SimplePopper, который отображает Toggle Button и который заключен в Popper.

2. Корень div из SimplePopper доступен для клика (я не могу перенести это событие клика в Botton coz в реальном коде, который я пишу, я не должен изменять существующийкод)

3. Выход на уровень приложения:

   a.У меня есть кнопка переключения, если я нажимаю на нее, я получаю журнал «родительская кнопка».

   b.Если я наведите курсор на кнопку Toggle, я получу Popper.

4. Так как у меня onClick уже находится в корне родительского элемента SimplePopper, если я щелкну где-нибудь внутри Popper, он сработаетсобытие родительского щелчка. Как предотвратить запуск любого события, присутствующего в родительском элементе, нажав на детей?

Пожалуйста, проверьте код здесь https://codesandbox.io/s/y4jwv4ry1

Answer 1

Вам нужно сделать две вещи:

В SimplePopper компоненте:

<div 
     onClick={this.handleClickButton} 
     ref={(node) => { this.parentNode = node }}> //added ref
            <PopperExample>
                <Button>Toggle</Button>
            </PopperExample>
</div>

и в handleClickButton:

handleClickButton = e => {
    if (this.parentNode !== null && this.parentNode !== undefined) {
        this.parentNode.contains(e.target) && console.log('parent Button');
    }
};

Функция будет выполнена, если this.parentNode содержит правильную цель.

и PopperExample:

handleButtonPopperClick = e => {
    e.preventDefault();
    e.stopPropagation();
    this.setState(state => ({
        showDiv: true
    }));
};

Рабочая демонстрация