我正在寻找一个在React.js中处理冒泡和捕获的示例。我用JavaScript找到了一个,但是我找不到与React.js等效的东西。
我该如何在React.js中创建一个冒泡和捕获示例?
React和DOM规范所描述的方式都支持冒泡和捕获,除了如何附加处理程序。
冒泡与普通DOM API一样直接。只需将处理程序附加到元素的最终父对象,只要在该元素上触发的任何事件都不会停止,则该事件会冒泡到父元素stopPropagation:
stopPropagation
<div onClick={this.handleClick}> <button>Click me, and my parent's `onClick` will fire!</button> </div>
捕获同样简单,尽管在docs中仅作了简要介绍。只需添加Capture到事件处理程序的属性名称:
Capture
<div onClickCapture={this.handleClickViaCapturing}> <button onClick={this.handleClick}> Click me, and my parent's `onClickCapture` will fire *first*! </button> </div>
在这种情况下,如果handleClickViaCapturing调用stopPropagation事件,onClick则不会调用按钮的处理程序。
handleClickViaCapturing
onClick
这个JSBin应该演示如何stopPropagation在React中捕获,冒泡和工作:https://jsbin.com/hilome/edit?js,output