ReactJS-mouseOut feuern bei Hover von Kind-Element?

Question

Ich habe ein div mit moueOver und mouseOut Funktionen. Warum feuert die Maus aus, wenn ich über eines der Kinder schwebe? Dies ist in einer Liste, also muss ich e.target vs. hard codieren die '.thumb-overlay'. Es zwickt auch die Hintergründe der h2 und h4 innen und ich verstehe nicht ganz. Hier ist ein FIDDLE.

<div className="thumb-overlay" 
onMouseOver={this.mouseOver.bind(this)} 
onMouseOut={this.mouseOut.bind(this)}> 
<h2>SOME H2 TAG</h2> 
<h4>SOME H4 TAG</h4> 
</div> 

Answer 1

können Sie e.currentTarget anstelle von e.target. e.currentTarget bezieht sich immer auf das Element der Event-Handler im Gegensatz angebracht wurde e.target

mouseOver(e) { 
    $(e.currentTarget).css('background', 'red'); 
} 
mouseOut(e) { 
    $(e.currentTarget).css('background', 'gray'); 
} 

jsfiddle