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

问题描述

当你做内联样式时，你如何在 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:函数(){返回 {悬停:假};},onMouseEnterHandler:函数(){this.setState({悬停:真});console.log('回车');},onMouseLeaveHandler:函数(){this.setState({悬停:假});console.log('离开');},渲染:函数(){内部变量 = 正常；如果(this.state.hover){内 = 悬停；}返回 (<div style={outer}><div 样式={内部}onMouseEnter={this.onMouseEnterHandler}onMouseLeave={this.onMouseLeaveHandler} >{this.props.children}

);}});外部变量 = {高度:'120px'，宽度:'200px'，边距:'100px'，背景颜色:'绿色'，光标:'指针'，位置:'相对'}var 正常 = {位置:'绝对'，顶部:0，底部:0，左:0，右:0，背景颜色:'红色'，不透明度:0}var 悬停 = {位置:'绝对'，顶部:0，底部:0，左:0，右:0，背景颜色:'红色'，不透明度:1}反应.render(<悬停></悬停>,document.getElementById('容器'))

解决方案

您是否尝试过其中任何一个?

onMouseDown onMouseEnter onMouseLeaveonMouseMove onMouseOut onMouseOver onMouseUp

SyntheticEvent

它还提到了以下内容:

React 规范化事件，使它们在不同浏览器中具有一致的属性.

下面的事件处理程序由冒泡阶段的事件触发.要为捕获阶段注册事件处理程序，请将 Capture 附加到事件名称；例如，您可以使用 onClickCapture 来处理捕获阶段的点击事件，而不是使用 onClick.

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

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

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.

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

Video of JSFiddle with problem: https://vid.me/ZJEO

The code:

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')
)

解决方案

Have you tried any of these?

onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

SyntheticEvent

it also mentions the following:

React normalizes events so that they have consistent properties across different browsers.

The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.

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