javascript - ReactJS—mouseOut在子元素悬停时触发？

我有一个带有moueOver和mouseOut函数的div。
当我将鼠标悬停在其中一个孩子上时，为什么mouseOut会触发？这在列表中，因此我需要使用e.target和硬编码“ .thumb-overlay”。它还在调整h2和h4的背景，我不太了解。
这是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>

最佳答案

您可以使用e.currentTarget代替e.target。 e.currentTarget始终是指事件处理程序已附加到的元素，而不是e.target

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

jsfiddle