React合成事件使用组件捕获气泡

我正在研究React Events，并且我注意到有关事件气泡和捕获的不寻常问题。React合成事件使用组件捕获气泡

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

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

任何人都可以告诉我，如果我在思考中是否正确？

我创建了一个演示。在演示中，如果您使用标准div替换Component“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"))

来源

2016-11-12 Garry Taylor

我工作了这一点！有一个错误。我没有将任何道具传递给Top组件，因此事件未被调用。我需要以下。愚蠢的错误，但很容易重构。

<Top {...props}>

来源

2016-11-12 23:33:53

React合成事件使用组件捕获气泡

回答

相关问题