javascript - 单击 react 图标图标时菜单未打开

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>
  );
};

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

Answer 1

这个问题似乎比我想象的要简单和奇怪。不知何故，MdStar 从 react-icons 渲染的 svg 捕捉到了点击。为避免这种情况，请添加以下 CSS:

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

您的 CodeSandbox 的工作分支 here .