[英]Menu not opening when clicking on react-icons icon
I have a menu that should open when I click on a button.我有一个菜单,当我点击一个按钮时应该打开。 and close when I click the button again or click outside the menu.
并在我再次单击该按钮或单击菜单外部时关闭。 It works right but it has a bug when I click on
svg icon
inside button, and it does not work, the menu does not open.它工作正常,但是当我单击按钮内的
svg icon
时出现错误,它不起作用,菜单无法打开。
const MoreActionBtn = () => {
const [showMoreAction, setShowMoreAction] = useState(false);
const moreBtns = useRef();
const { current } = moreBtns;
useEffect(() => {
const outSideClickHandler = (e) => {
if (current && !current.contains(e.target)) {
setShowMoreAction(false);
}
};
document.addEventListener("click", outSideClickHandler);
return () => {
document.removeEventListener("click", outSideClickHandler);
};
}, [current]);
function toggleMoreAcrion() {
setShowMoreAction((prev) => !prev);
}
return (
<div ref={moreBtns} className="more-action-wrapper">
{showMoreAction && (
<div>
<button>
<MdDone />
</button>
<button>
<MdOutlineModeEdit />
</button>
</div>
)}
<button onClick={toggleMoreAcrion}>
{showMoreAction ? <MdOutlineCancel /> : <MdStars />}
</button>
</div>
);
};
Here is a codesandbox of my code.这是我的代码的代码框。 Is there a better solution?
有更好的解决方案吗?
It seems like the problem is simpler than I thought.似乎问题比我想象的要简单。 What's happening is that somehow the
svg
rendered by MdStar
from react-icons
is catching the click.发生的事情是,
svg
从react-icons
渲染的MdStar
以某种方式吸引了点击。 To avoid this add the below CSS:为避免这种情况,请添加以下 CSS:
.more-action-wrapper svg {
pointer-events: none;
}
Working forked of your CodeSandbox here . 在这里工作分叉您的 CodeSandbox。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.