当您进行内联样式时，如何在 ReactJS 中实现悬停事件或活动事件？

我发现 onMouseEnter, onMouseLeave 方法有问题，所以希望有另一种方法来做到这一点。

具体来说，如果您非常快速地将鼠标悬停在某个组件上，则只会注册 onMouseEnter 事件。onMouseLeave 永远不会触发，因此无法更新状态......让组件看起来好像它仍然被悬停在上面。如果您尝试模仿 ":active" 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',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'red',
    opacity: 1
}

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