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

我正在寻找一个在React.js中处理冒泡和捕获的示例。我找到了one with JavaScript，但是在查找React.js的等效项时遇到了麻烦。

我将如何在React.js中创建一个关于冒泡和捕获的示例？

最佳答案

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添加到事件处理程序属性名称中:

<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应该演示React中的捕获，冒泡和stopPropagation如何工作:https://jsbin.com/hilome/edit?js,output

关于javascript - 在React.js中冒泡和捕获的示例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34522931/