I am researching React Events at the moment and I have noticed an unusual issue regarding event bubble and Capture.
If I have a nested group of div tags, all with their own onClick/onClickCapture, then this works as expected. Events trigger "down/up" the DOM tree.
However, if one of them Divs is a React.Component, it will not catch the event. I believe this is by design, where React is taking the stance that Components should always be "Stand-Alone" and therefore, should not handle events raised by other Components (even if they are nested).
Can anyone tell me if I am right in my thinking?
I have created a demo. In the demo, if you replace the Component "Top" with a standard div, it will bubble and Capture as expected.
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"))
