Пример для всплытия и захвата в React.js

Question

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

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

Answer 1

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

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

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

Захват также прост, хотя в документах он упоминается лишь кратко. Просто добавь Capture к имени свойства обработчика события:

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

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

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