单击反应图标图标时菜单未打开

Question

我有一个菜单，当我点击一个按钮时应该打开。 并在我再次单击该按钮或单击菜单外部时关闭。 它工作正常，但是当我单击按钮内的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>
  );
};

这是我的代码的代码框。 有更好的解决方案吗？

Answer 1

似乎问题比我想象的要简单。 发生的事情是， svg从react-icons渲染的MdStar以某种方式吸引了点击。 为避免这种情况，请添加以下 CSS：

.more-action-wrapper svg {
  pointer-events: none;
}

在这里工作分叉您的 CodeSandbox。