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>

捕获同样简单,尽管在文档中只是简单地提到过.只需添加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