javascript - react : event bubbling through nested components

Question

假设我有这样的嵌套组件:

<root />
  <comp1 />
    <comp2 />
      <target id={this.props.id}>
        <div>click me</div>

我想让点击目标在 root 上运行一个函数:

//on root component
this.action = function(id){}

我是否需要在链中的每个组件上手动设置属性，就像在 React 教程示例中那样？ Jsfiddle

<root />
  <comp1 clickHandler={this.action}/>
    <comp2 clickHandler={this.clickHandler}/>
      <target id={this.props.id} clickHandler={this.clickHandler} />
        <div onClick={this.props.clickHandler.bind(this, this.props.id)}>click me</div>

或者有什么方法可以像在普通 DOM 中一样使事件冒泡吗？

Answer 1

React 在捕获和冒泡阶段都支持跨其虚拟 DOM 的合成事件(如此处所述:https://facebook.github.io/react/docs/events.html)。

这意味着您可以在根附近的任何 DOM 元素上放置一个 onClick 处理程序，它应该触发页面上的所有 Click 事件:

<root>
  <div onClick={this.handleAllClickEvents}>
    <comp1>
      <comp2>
        <target>
          <div id={this.props.id}>click me</div>

但是，由于它会触发所有 点击事件，您需要在点击处理程序中消除它们之间的歧义(这会产生一些非常难看的代码)。

function handleAllClickEvents(event) {
  var target = event.relatedTarget;
  var targetId = target.id;
  switch(targetId) {
    case 'myBtn1':
      // handle myBtn1 click event
    case 'myBtn2':
      // handle myBtn2 click event
  }
}

这种事件委托(delegate)风格实际上是 React 在幕后所做的 (https://shripadk.github.io/react/docs/interactivity-and-dynamic-uis.html#under-the-hood-autobinding-and-event-delegation)，因此您必须问问自己这是否是您真正想要做的。

或者，您可能想看看 Flux 中的 Dispatcher 模式 (https://reactjs.org/blog/2014/07/30/flux-actions-and-the-dispatcher.html)。开始有点复杂，但总体来说是一个更好的解决方案。