В настоящее время я изучаю React Events, и я заметил необычную проблему, касающуюся пузырьков событий и Capture.React Synthetic Events Bubble Capture with Components
Если у меня есть вложенная группа тегов div, все со своим onClick/onClickCapture, то это работает так, как ожидалось. События запускают «вниз/вверх» дерево DOM.
Однако, если один из них Divs является React.Component, он не поймает событие. Я считаю, что это по дизайну, где React занимает позицию, что компоненты всегда должны быть «Stand-Alone» и, следовательно, не должны обрабатывать события, создаваемые другими компонентами (даже если они вложены).
Может ли кто-нибудь сказать мне, насколько я прав в своих мыслях?
Я создал демоверсию. В демоверсии, если вы замените компонент «Верх» стандартным div, он будет пузыриться и Capture, как ожидалось.
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"))