我发现onMouseEnter，onMouseLeave方法是错误的，所以希望有另一种方法来做到这一点。

具体来说，如果您非常快速地将鼠标悬停在组件上，则只会注册onMouseEnter事件。 onMouseLeave永远不会触发，因此无法更新状态…使组件显示为仍然悬停在其上。我注意到同样的事情，如果你尝试和模仿“：活动”css伪类。如果你点击真的很快，只有onMouseDown事件将注册。 onMouseUp事件将被忽略，使组件显示为活动状态。

这是一个JSFiddle显示的问题：https://jsfiddle.net/y9swecyu/5/

JSFiddle的视频问题：https://vid.me/ZJEO

代码：

var Hover = React.createClass({
    getInitialState: function() {
        return {
            hover: false
        };
    },onMouseEnterHandler: function() {
        this.setState({
            hover: true
        });
        console.log('enter');
    },onMouseLeaveHandler: function() {
        this.setState({
            hover: false
        });
        console.log('leave');
    },render: function() {
        var inner = normal;
        if(this.state.hover) {
            inner = hover;
        }

        return (
            <div style={outer}>
                <div style={inner}
                    onMouseEnter={this.onMouseEnterHandler}
                    onMouseLeave={this.onMouseLeaveHandler} >
                    {this.props.children}
                </div>
            </div>
        );
    }
});

var outer = {
    height: '120px',width: '200px',margin: '100px',backgroundColor: 'green',cursor: 'pointer',position: 'relative'
}

var normal = {
    position: 'absolute',top: 0,bottom: 0,left: 0,right: 0,backgroundColor: 'red',opacity: 0
}

var hover = {
    position: 'absolute',opacity: 1
}

React.render(
    <Hover></Hover>,document.getElementById('container')
)