Пример для Bubbling and Capturing in React.js

Question

Я ищу пример при обработке Bubbling и Capturing в React.js. Я нашел one with JavaScript, но у меня возникли проблемы с поиском эквивалента для React.js.

Как мне создать пример для Bubbling и Capturing в React.js?

Answer 1

Bubbling и capture поддерживаются React так же, как описано в спецификации DOM, за исключением того, как вы собираетесь подключать обработчики.

Bubbling так же просто, как и с обычным API DOM; просто прикрепить обработчик к возможному родителя элемента, а также любые события вызвали на этот элемент будет пузыриться к родителю, пока она не остановилась через stopPropagation по пути:

<div onClick={this.handleClick}> 
    <button>Click me, and my parent's `onClick` will fire!</button> 
</div> 

Capturing столь же просто, хотя это mentioned only briefly in the docs. Просто добавьте Capture в обработчик события имя свойства:

<div onClickCapture={this.handleClickViaCapturing}> 
    <button onClick={this.handleClick}> 
    Click me, and my parent's `onClickCapture` will fire *first*! 
    </button> 
</div> 

В этом случае, если handleClickViaCapturing вызовы stopPropagation на событие, onClick обработчик этой кнопки не будет вызываться.

This JSBin должен показать, как захват, кипящий, и stopPropagation работы в React: https://jsbin.com/hilome/edit?js,output