ReactJS - пузыри событий - узнайте цепочку событий - PullRequest
Новая
       85

ReactJS - пузыри событий - узнайте цепочку событий

0 голосов
/ 29 марта 2020

У меня есть раздел пользовательского интерфейса, завернутый в <div с обработчиком onClick. В этом контейнере у меня есть другой элемент с обработчиком щелчка, который при нажатии должен выполнять только обработчик элемента, а не внешний div. Для стандартных элементов это легко, просто предотвращая всплывание элемента с event.stopPropagation(). Тем не менее, я использую элемент из библиотеки пользовательского интерфейса, более конкретно Элемент Dropdown . Предотвращение распространения для кнопки верхнего уровня работает, но я, очевидно, не могу добавить настраиваемое событие onClick к элементам выпадающего списка, и, следовательно, при нажатии на один из элементов также запускается внешний обработчик div. Единственный способ решить эту проблему, который я придумал, - узнать, было ли событие уже обработано один раз выпадающим элементом.

Следовательно, вопрос, могу ли я увидеть, если событие, которое всплыло, уже прошло через другой обработчик событий? 

<div onClick={....}>
    <Dropdown onCommand={...} menu={(
        <Dropdown.Menu>
            {/* does not work */}
            <Dropdown.Item command="cmd1" onClick={(e) => e.stopPropagation()}>DropDown Button</Dropdown.Item>
        </Dropdown.Menu>
    })>
       {/* works */}
       <Button onClick={(e) => e.stopPropagation()}>Top level button</Button>
    </Dropdown>
</div>

1 Ответ

0 голосов
/ 29 марта 2020

Я думаю, что вы ищете event.target, который идентифицирует элемент, на котором произошло событие.

Теперь вам просто нужно выяснить, относится ли event.target к выпадающему предмет или нет. Я думаю, исходя из этого, вы можете действовать соответствующим образом, когда он попадает в onClick родительского div.

Надеюсь, это поможет.

...