相关疑难解决方法(0)

当你进行内联样式时,如何在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: …