css – 如何将鼠标悬停在ReactJS中？ – onMouseLeave在快速悬停时未注册

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

我发现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')
)

解决方法

如果您可以生成一个演示显示onMouseEnter / onMouseLeave或onMouseDown / onmouseup错误的小型演示文稿，那么将其发布到ReactJS的问题页面或邮件列表中是非常值得的，只是为了提出问题并听取开发人员的意见。

在您的用例中，您似乎暗示CSS：悬停和：活动状态对您的目的是足够的，所以我建议您使用它们。 CSS比JavaScript更快，更可靠，因为它直接在浏览器中实现。

但是：hover和：不能在内联样式中指定活动状态。您可以做的是为元素分配一个ID或一个类名，并在样式表中编写样式，如果它们在应用程序中有些不变，或者动态生成的< style>标签。

以下是后一种技术的一个例子：https://jsfiddle.net/ors1vos9/

原文地址：https://www.jb51.cc/css/218214.html