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

Posted 2023-05-07

【中文标题】React.js 中冒泡和捕获的示例

【英文标题】：Example for Bubbling and Capturing in React.js

【发布时间】：2016-04-04 00:55:56

【问题描述】：

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

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

【问题讨论】：

事件冒泡是 DOM 特定的事件概念。 React 的全部意义在于摆脱 DOM。你可以在 React 中通过创建组件函数并通过 props 将它们传递给子函数来做到这一点

看React events和React DOM event listeners

【参考方案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 添加到事件处理程序属性名称。比如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 处理程序。

This JSBin 应该演示捕获、冒泡和stopPropagation 在 React 中的工作原理：https://jsbin.com/hilome/edit?js,output

【讨论】：

要记住的是，所有原版 javascript 事件，例如来自库的事件，都是预先调用的。无论您是在 Capture 阶段还是 Bubble 阶段注册事件。

如果我想要相反的情况怎么办？如果我有父级的onClick 并且即使单击子级也想调用该函数怎么办？

@Dane 那是正常的事件冒泡，如上面两个例子中的第一个所述（当你点击子按钮时会触发父 div 的 onClick）。

@MichelleTilley。你能帮我吗？***.com/questions/47690686/…

@Pants 怎么样？如果您有一个小评论无法回答的具体问题，请提出单独的 SO 问题。