我正在寻找在 React.js 中处理冒泡和捕获的示例。我找到了一个 JavaScript,但我找不到 React.js 的等效项。
我必须如何为 React.js 中的冒泡和捕获创建示例?
我正在寻找在 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
到事件处理程序属性名称。例如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应该演示如何stopPropagation
在 React 中捕获、冒泡和工作:https : //jsbin.com/hilome/edit?js,output