你如何在 ReactJS 中徘徊？- 在快速悬停期间鼠标未注册

javascript dom-events css reactjs mouseevent

2022-08-30 04:13:07

当您进行内联样式设置时，如何在 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')
)

答案 1

你试过这些吗？

onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp

合成事件

它还提到了以下内容：

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

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

答案 2

前面的答案非常令人困惑。你不需要一个反应状态来解决这个问题，也不需要任何特殊的外部库。它可以通过纯css / sass来实现：

风格：

.hover {
  position: relative;

  &:hover &__no-hover {
    opacity: 0;
  }

  &:hover &__hover {
    opacity: 1;
  }

  &__hover {
    position: absolute;
    top: 0;
    opacity: 0;
  }

  &__no-hover {
    opacity: 1;
  }
}

The React-Component

一个简单的纯渲染函数：Hover

const Hover = ({ onHover, children }) => (
    <div className="hover">
        <div className="hover__no-hover">{children}</div>
        <div className="hover__hover">{onHover}</div>
    </div>
)

用法

然后像这样使用它：

    <Hover onHover={<div> Show this on hover </div>}>
        <div> Show on no hover </div>
    </Hover>