javascript - 你如何在 ReactJS 中悬停？ - 快速悬停期间未注册 onMouseLeave

Question

当你做内联样式时，你如何在 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')
)

Answer 1

你试过这些吗？

onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp

SyntheticEvent

它还提到了以下内容:

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

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