javascript - React.js 在悬停问题上显示部分组件

Question

我在显示组件上的覆盖时遇到问题。下面是代码。

<div className="content">
    <div className="main" onMouseEnter={this.mouseOver} onMouseLeave={this.mouseLeaves}>
    ...
    </div>
    <div className="overlay" style={this.getOverlayStyle()} ref="overlay">
    </div>
</div>

这是样式方法:

getOverlayStyle: function() {
    return {
        display: 'none',
        position: 'absolute',
        top: '0',
        bottom: '0',
        left: '0',
        right: '0',
        zIndex: '100'
    }; 
}

这些是鼠标事件处理程序:

mouseOver: function() {
    this.refs.overlay.style.display = 'block';
},
mouseLeaves: function() {
    this.refs.overlay.style.display = 'none';
},

好的，所以，当我将鼠标悬停在内容部分上时，叠加层变得可见，但它在闪烁。当我停止在内容上方移动鼠标时，叠加层显示得很好。当我再次移动鼠标时，它再次闪烁，几乎无法观看，非常烦人。

当我尝试使覆盖在控制台中可见时(只是您的常规 document.getElementsByClassName('overlay')[0].style.display = 'block'，它正常工作并且不会闪烁。我猜这个问题是由于我对 React 的了解还不够。

知道为什么会这样吗？

Ps，我尝试使用纯 CSS 解决方案:selector1 + selector2 { display: block; } 并且它的行为与上面相同。

编辑，我尝试通过状态设置可见性(在鼠标进入和鼠标离开时更改状态)，遵循评论中的建议，但当鼠标移动时它仍然闪烁。

Answer 1

我很确定您需要将 mouseenter 和 mouseleave 移动到 .content div，而不是 .main 分区

我期望发生的是这样的:

进入main，显示overlay，表示鼠标离开main，进入overlay。因为它离开了 main，所以 overlay 被隐藏，当 overlay 被隐藏时，鼠标重新进入 main 导致循环冲洗和重复

虽然这真的可以用 css 选择器来完成。你有什么理由想在 react 中这样做吗？