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

Question

我正在寻找一个在React.js中处理Bubbling和Capturing的例子。我找到了一个使用JavaScript的例子，但我很难找到与React.js等效的例子。

我必须如何在React.js中创建Bubbling和Capturing的示例？

Answer 1

React以DOM规范所描述的相同方式支持Bubbling和捕获，只是如何附加处理程序。

冒泡和普通的DOM API一样简单；只需将一个处理程序附加到一个元素的最终父元素上，只要该元素没有通过stopPropagation停止，该元素上触发的任何事件都会出现在父元素上：

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

捕获同样简单，尽管在文档中只简单地提到了它。只需将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处理程序。

这个JSBin应该演示React中捕获、冒泡和stopPropagation的工作原理：https://jsbin.com/hilome/edit?js，输出