我正在寻找在 React.js 中处理冒泡和捕获的示例。我发现one with 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>
捕获同样简单,尽管它是 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应该演示如何在 React 中捕获、冒泡和 stopPropagation
工作:https://jsbin.com/hilome/edit?js,output
关于javascript - React.js 中的冒泡和捕获示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34522931/