悬停在嵌套的React组件上会触发父组件onMouseOut和无限循环
悬停在嵌套的React组件上会触发父组件onMouseOut和无限循环
提问于 2019-06-20 03:33:07
我有一个React菜单项，它应该在悬停时浮出一个子组件。当子组件info-icon悬停时，应该会弹出一个工具提示。它看起来像这样：
下面是组件：
const TestFunc = (props) => {
const { icon, label, data } = props;
const [hovering, setState] = useState(false);
return (
<div className="menu-item" onMouseOver={() => setState(true)} onMouseOut={() => setState(false)}>
<div className="menu-item-element">
<div className="sub-menu-item-element">{icon}</div>
<div className="sub-menu-item-element">{label}</div>
</div>
{hovering ?
<Tooltip
id="base"
align="top"
content={data.tooltipContent}
variant="learnMore"
className="menu-item-element"
position="overflowBoundaryElement"
/>
: null
}
</div>
);但是当我将鼠标悬停在info图标上时，这会触发mouseOut函数，然后图标消失，然后触发mouseOver函数，它就像这样循环，info图标一遍又一遍闪烁。
我该如何解决这个问题？
回答 1
Stack Overflow用户
发布于 2019-06-20 03:38:38
在图标中使用onMouseLeave，以防止气泡到父对象。或e.stopPropagation()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56674678
复制相关文章
相似问题