如何在ReactJS中悬停？ - onMouseLeave未在快速悬停期间注册 [英] How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

问题描述

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

How can you achieve either a hover event or active event in ReactJS when you do inline styling?

我发现onMouseEnter，onMouseLeave方法是有问题的，所以希望有另一种方法。

I've found that the onMouseEnter, onMouseLeave approach is buggy, so hoping there is another way to do it.

具体来说，如果你在组件上鼠标很快，只有onMouseEnter事件被注册。 onMouseLeave从不触发，因此不能更新状态...使组件显示为仍然被悬停在上面。我注意到同样的事情，如果你尝试和模仿：activecss伪类。如果你真的快点击，只有onMouseDown事件会注册。

Specifically, if you mouse over a component very quickly, only the onMouseEnter event is registered. The onMouseLeave never fires, and thus can't update state... leaving the component to appear as if it still is being hovered over. I've noticed the same thing if you try and mimic the ":active" css pseudo-class. If you click really fast, only the onMouseDown event will register. The onMouseUp event will be ignored... leaving the component appearing active.

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

Here is a JSFiddle showing the problem: https://jsfiddle.net/y9swecyu/5/

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

Video of JSFiddle with problem: 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')
)

推荐答案

如果你可以生成一个小演示显示onMouseEnter / onMouseLeave或onMouseDown / onMouseUp错误，它是值得发布到ReactJS的问题页面或邮件列表，只是提出问题，听到

If you can produce a small demo showing the onMouseEnter / onMouseLeave or onMouseDown / onMouseUp bug, it would be worthwhile to post it to ReactJS's issues page or mailing list, just to raise the question and hear what the developers have to say about it.

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

In your use case, you seem to imply that CSS :hover and :active states would be enough for your purposes, so I suggest you use them. CSS is orders of magnitude faster and more reliable than Javascript, because it's directly implemented in the browser.

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

However, :hover and :active states cannot be specified in inline styles. What you can do is assign an ID or a class name to your elements and write your styles either in a stylesheet, if they are somewhat constant in your application, or in a dynamically generated <style> tag.

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

Here's an example of the latter technique: https://jsfiddle.net/ors1vos9/

这篇关于如何在ReactJS中悬停？ - onMouseLeave未在快速悬停期间注册的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！