React.js中冒泡和捕获的示例 [英] Example for Bubbling and Capturing in React.js

问题描述

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

I am looking for an example in handling Bubbling and Capturing in React.js. I found one with JavaScript, but I am having trouble finding the equivalent for React.js.

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

How would I have to create an example for Bubbling and Capturing in React.js?

推荐答案

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

Bubbling and capturing are both supported by React in the same way as described by the DOM spec, except for how you go about attaching handlers.

Bubbling与普通的DOM API一样简单;只需将处理程序附加到元素的最终父级，并且在该元素上触发的任何事件都会冒泡到父级，只要它不会通过 stopPropagation 一路停止：

Bubbling is as straightforward as with the normal DOM API; simply attach a handler to an eventual parent of an element, and any events triggered on that element will bubble to the parent as long as it's not stopped via stopPropagation along the way:

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

捕获同样简单，但它是仅在文档中简要提及。只需将 Capture 添加到事件处理程序属性名称：

Capturing is just as straightforward, though it's mentioned only briefly in the docs. Simply add Capture to the event handler property name:

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

在这种情况下，如果 handleClickViaCapturing 调用 stopPropagation 关于该事件，该按钮的 onClick 处理程序将不会被调用。

In this case, if handleClickViaCapturing calls stopPropagation on the event, the button's onClick handler will not be called.

此JSBin 应演示如何捕获，冒泡和 stopPropagation 适用于React： https://jsbin.com/hilome/edit?js,output

This JSBin should demonstrate how capturing, bubbling, and stopPropagation works in React: https://jsbin.com/hilome/edit?js,output

这篇关于React.js中冒泡和捕获的示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！