Question

我正在研究React Events，我注意到有关事件冒泡和捕获的不寻常问题。

如果我有一组嵌套的div标签，都有自己的onClick / onClickCapture，那么这可以按预期工作。事件触发“向下/向上”DOM树。

但是，如果其中一个Div是React.Component，它将不会捕获该事件。我相信这是设计的，其中React采取的结构应该始终是“Stand-Alone”，因此，不应该处理其他组件引发的事件（即使它们是嵌套的）。

有谁可以告诉我，我的思维是否正确？

我创建了一个演示。在演示中，如果使用标准div替换组件“Top”，它将按预期冒泡并捕获。

http://codepen.io/anon/pen/KNdBYW?editors=0010

const Top = (props) => (
  <div id="A" onClick={props.bubbleA} onClickCapture={props.captureA}>
    {props.children}
  </div>
)

const App = (props) => (
  <Top>A:Top Event
    <div id="B" onClick={props.bubbleB} onClickCapture={props.captureB}>B:I Propagate
      <div id="C" onClick={props.bubbleC} onClickCapture={props.captureC}>C:Don't Propagate
      </div>
    </div>
 </Top>
)

const props = {
  bubbleA: (e) => alert("bubble:A Target:" + e.target.id),
  captureA: (e) => alert("Capture:A Target:" + e.target.id),
  bubbleB: (e) => alert("bubble:B Target:" + e.target.id),
  captureB: (e) => alert("Capture:B Target:" + e.target.id),
  bubbleC: (e) => alert("bubble:C Target:" + e.target.id),
  captureC: (e) => alert("Capture:C Target:" + e.target.id)
}

ReactDOM
  .render(<App {...props} />, 
  document.getElementById("app"))

Answer 1

我解决了这个问题！有一个错误。我没有将任何道具传递给Top组件，因此没有调用事件。我需要以下内容。愚蠢的错误，但在重构时很容易做到。

<Top {...props}>

使用组件反应合成事件冒泡捕获

1 个答案: