React.js 中的冒泡和捕获示例

Question

我正在寻找 React.js 中处理冒泡和捕获的示例。我找到了 one with JavaScript，但找不到 React.js 的等价物。

如何在 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>

捕获同样简单，尽管它是 mentioned only briefly in the docs。只需将 Capture 添加到事件处理程序属性名称即可。例如 onClick 变成 onClickCapture:

<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 should demonstrate how capturing, bubbling, and stopPropagation works in React: https://jsbin.com/hilome/edit?js,output

React.js 中的冒泡和捕获示例

Example for Bubbling and Capturing in React.js

javascript

event-bubbling

event-capturing

reactjs