Question

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

我如何在React.js中创建冒泡和捕获的示例？

Answer 1

React支持冒泡和捕获的方式与DOM规范描述的方式相同，除了你如何附加处理程序。

Bubbling与普通的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应该演示捕获，冒泡和stopPropagation在React中的工作原理：https://jsbin.com/hilome/edit?js,output

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

1 个答案: