点击react-icons图标时菜单无法展开的问题排查与优化方案咨询

你的问题根源是点击SVG图标时，事件冒泡到document的外部点击监听后，引发了状态交互冲突。以下是几种最优解决方案：

方案一：停止按钮点击事件的冒泡 #

在切换菜单状态的函数中调用e.stopPropagation()，阻止事件传递到document层面，避免外部点击监听干扰按钮逻辑：

const MoreActionBtn = () => {
  const [showMoreAction, setShowMoreAction] = useState(false);
  const moreBtns = useRef();

  function toggleMoreAcrion(e) {
    e.stopPropagation(); // 阻止事件冒泡
    setShowMoreAction((prev) => !prev);
  }

  useEffect(() => {
    const outSideClickHandler = (e) => {
      if (moreBtns.current && !moreBtns.current.contains(e.target)) {
        setShowMoreAction(false);
      }
    };
    document.addEventListener("click", outSideClickHandler);
    return () => {
      document.removeEventListener("click", outSideClickHandler);
    };
  }, []);

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

方案二：让SVG图标不捕获点击事件 #

给SVG图标添加pointer-events: none样式，点击SVG时会直接触发父按钮的点击事件，不会让SVG成为事件目标：

<button onClick={toggleMoreAcrion}>
  {showMoreAction ? (
    <MdOutlineCancel style={{ pointerEvents: 'none' }} />
  ) : (
    <MdStars style={{ pointerEvents: 'none' }} />
  )}
</button>

这种方式更轻量，适合仅需解决SVG点击问题的场景。

方案三：优化外部点击监听逻辑 #

给触发按钮添加ref，在外部点击监听中排除按钮及其子元素的点击：

const MoreActionBtn = () => {
  const [showMoreAction, setShowMoreAction] = useState(false);
  const moreBtns = useRef();
  const toggleBtn = useRef();

  function toggleMoreAcrion() {
    setShowMoreAction((prev) => !prev);
  }

  useEffect(() => {
    const outSideClickHandler = (e) => {
      if (
        moreBtns.current && 
        !moreBtns.current.contains(e.target) && 
        !toggleBtn.current.contains(e.target)
      ) {
        setShowMoreAction(false);
      }
    };
    document.addEventListener("click", outSideClickHandler);
    return () => {
      document.removeEventListener("click", outSideClickHandler);
    };
  }, []);

  return (
    <div ref={moreBtns} className="more-action-wrapper">
      {showMoreAction && (
        <div>
          <button>
            <MdDone />
          </button>
          <button>
            <MdOutlineModeEdit />
          </button>
        </div>
      )}
      <button ref={toggleBtn} onClick={toggleMoreAcrion}>
        {showMoreAction ? <MdOutlineCancel /> : <MdStars />}
      </button>
    </div>
  );
};

额外优化建议 #

• 使用useCallback缓存切换函数，避免组件重渲染时创建新的函数实例：

const toggleMoreAcrion = useCallback((e) => {
  e.stopPropagation();
  setShowMoreAction((prev) => !prev);
}, []);

• 无需将moreBtns.current加入useEffect的依赖列表，ref的current属性变化不会触发组件重渲染，在useEffect中可直接访问最新值。

内容的提问来源于stack exchange，提问作者Ahmad MRF