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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

这个JSBin应该演示如何stopPropagation在React中捕获，冒泡和工作：https：//jsbin.com/hilome/edit？js，output

以上是 在React.js中冒泡和捕获的示例 的全部内容， 来源链接： utcz.com/qa/415324.html

回到顶部