1

我目前正在研究 React Events，我注意到一个关于事件气泡和捕获的不寻常问题。

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

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

谁能告诉我我的想法是否正确？

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

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"))
4

1 回答 1

0

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

<Top {...props}>
于 2016-11-12T23:33:53.260 回答