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

Question

我正在寻找一个在React.js中处理事件冒泡和捕获的示例。我找到了一个使用JavaScript的示例，但我很难找到React.js的等效示例。 我该如何创建一个在React.js中展示事件冒泡和捕获的示例？

- Socrates

---

事件冒泡是一个特定于DOM的事件概念。React的整个重点是远离DOM。在React中，您可以通过创建组件函数并通过props传递给子组件来实现这一点。 - azium

请查看React事件和React DOM事件监听器。 - Matthew Herbst

Answer 1

"Bubbling和Capturing在React中的支持方式与DOM规范描述的方式相同，只是附加处理程序的方式不同。"

"Bubbling与普通的DOM API一样简单；只需将处理程序附加到元素的最终父级上，任何在该元素上触发的事件都会冒泡到父级，除非在此过程中通过stopPropagation停止它："

<div onClick={this.handleClick}>
  <button>Click me, and my parent's `onClick` will fire!</button>
</div>

捕获同样很简单，虽然文档中只简短地提到了它。只需将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处理程序将不会被调用。 这个JSBin应该演示了React中捕获、冒泡和stopPropagation的工作原理：https://jsbin.com/hilome/edit?js,output

- Michelle Tilley

---

需要注意的是，所有基础的JavaScript事件（例如来自库的事件）都会在调用之前被触发，无论您是在捕获阶段还是冒泡阶段注册该事件。 - Jodo

如果我想要相反的呢？如果我在父元素上有 onClick 事件，当子元素被点击时我还想调用该函数怎么办？ - Dane

@Dane 这是正常的事件冒泡，就像上面两个例子中描述的那样（当您单击子按钮时，将触发父div的onClick）。 - Michelle Tilley

@Pants 有什么问题吗？如果您有一个无法在小评论中回答的具体问题，请提出一个单独的SO问题。 - Michelle Tilley

捕获阶段事件处理程序的使用情况是什么？ - Rahul Yadav