Я ищу пример при обработке Bubbling и Capturing в React.js. Я нашел один с JavaScript, но мне трудно найти эквивалент для React.js.
Как мне создать пример для Bubbling и Capturing в React.js?
Bubbling и capture поддерживаются React так же, как описано в спецификации DOM, за исключением того, как вы собираетесь подключать обработчики.
Bubbling так же просто, как и с обычным DOM API; просто присоедините обработчик к возможному родительскому элементу элемента, и любые события, инициированные на этом элементе, будут пузыряться с родителем, если он не остановится через stopPropagation
по пути:
<div onClick={this.handleClick}>
<button>Click me, and my parent `onClick` will fire!</button>
</div>
Захват так же прост, хотя упоминается только в документах. Просто добавьте Capture
в имя свойства обработчика события:
<div onClickCapture={this.handleClickViaCapturing}>
<button onClick={this.handleClick}>
Click me, and my parent `onClickCapture` will fire *first*!
</button>
</div>
В этом случае, если handleClickViaCapturing
вызывает stopPropagation
в событии, обработчик кнопки onClick
не будет вызываться.
Этот JSBin должен продемонстрировать, как работает захват, пузырь и stopPropagation
в React: https://jsbin.com/hilome/edit?js,output
onClick
для родителя, и я хочу вызвать эту функцию, даже когда ребенок нажимается?