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

Question

我正在寻找在 React.js 中处理冒泡和捕获的示例。我找到了一个 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>

捕获同样简单，尽管在 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处理程序将不会被调用。

这个 JSBinstopPropagation应该演示如何在 React 中捕获、冒泡和工作： https ://jsbin.com/hilome/edit?js,output