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

IT技术 javascript reactjs event-bubbling event-capturing
2021-03-16 07:41:34

我正在寻找在 React.js 中处理冒泡和捕获的示例。我找到了一个 JavaScript,但我找不到 React.js 的等效项。

我必须如何为 React.js 中的冒泡和捕获创建示例?

1个回答

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

需要记住的是,所有 vanilla javascript 事件,例如来自库的事件,都是预先调用的。无论您是在 Capture 还是 Bubble 阶段注册事件。
2021-05-01 07:41:34
@Dane 这是正常的事件冒泡,如上面两个示例中的第一个所述(单击子按钮时会触发父 div 的 onClick)。
2021-05-13 07:41:34
@Pants 怎么样?如果您有无法在小评论中回答的特定问题,请提出单独的 SO 问题。
2021-05-14 07:41:34
如果我想要相反的怎么办?如果我onClick为父级设置 并且即使单击子级也想调用该函数怎么办?
2021-05-15 07:41:34
@米歇尔蒂利。你能在这里帮助我吗 - stackoverflow.com/questions/47690686/...
2021-05-15 07:41:34