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

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

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

Ответ 1

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