React点击外部关侧边栏时，Navbar图标点击引发关后重开问题的解决

问题背景 #

我有两个React组件：Navbar和侧边栏购物车（Cart）。Navbar中的按钮负责控制侧边栏的打开与关闭，点击外部区域关闭侧边栏的功能正常，但存在一个问题：当侧边栏处于激活状态时，点击Navbar上的购物车图标，侧边栏会先关闭随后重新打开——这是因为该点击事件被clickOutside函数捕获，触发了关闭逻辑，之后又执行了图标的切换逻辑。

解决方案 #

方法一：阻止Navbar图标点击事件冒泡 #

在Navbar的图标点击事件中调用e.stopPropagation()，阻止事件向上传播到document的mousedown监听器，这样就不会触发外部点击的关闭逻辑。

修改Navbar组件的图标点击部分：

<div className="icon" onClick={(e) => {
  e.stopPropagation(); // 阻止事件冒泡
  setCartActive(!cartActive);
}}>
  <FaShoppingBag /> ({totalItems})
</div>

方法二：在外部点击判断中排除Navbar图标元素 #

给Navbar的图标添加一个唯一类名，然后在handleClickOutside函数中检查点击目标是否是该图标或其后代元素，若是则跳过关闭逻辑。

1. 给Navbar的图标添加类名：

<div className="icon cart-toggle-icon" onClick={() => setCartActive(!cartActive)}>
  <FaShoppingBag /> ({totalItems})
</div>

2. 修改Cart组件的handleClickOutside函数：

const handleClickOutside = (e) => {
  // 检查点击目标是否是购物车图标或其子元素，若是则直接返回
  if (e.target.closest('.cart-toggle-icon')) return;

  if (cartActive && cartRef.current && !cartRef.current.contains(e.target)) {
    setCartActive(false);
  }
};

额外修复：完善useEffect的清理逻辑 #

原Cart组件中的useEffect没有正确返回清理函数，会导致重复添加事件监听器，需要修正：

useEffect(() => {
  document.addEventListener("mousedown", handleClickOutside);

  // 返回清理函数，组件卸载时移除监听器
  return () => {
    document.removeEventListener("mousedown", handleClickOutside);
  };
}, [cartActive]); // 添加依赖项，避免不必要的监听器重复绑定

完整修改后的关键代码 #

修改后的Navbar组件 #

import { useEffect, useState } from "react";
import { FaShoppingBag } from "react-icons/fa";
import { useSelector } from "react-redux";

export const Navbar = ({ setCartActive, cartActive }) => {
  const cart = useSelector((state) => state.cart.cart);
  const [totalItems, setTotalItems] = useState(0);

  const fetchTotalItems = () => {
    setTotalItems(cart.reduce((acc, curr) => acc + curr.amount, 0));
  };

  useEffect(() => {
    fetchTotalItems();
  }, [cart]);

  return (
    <nav>
      <div className="container">
        <div className="brand">
          Redux<span>Store</span>
        </div>
        <div className="icon" onClick={(e) => {
          e.stopPropagation();
          setCartActive(!cartActive);
        }}>
          <FaShoppingBag /> ({totalItems})
        </div>
      </div>
    </nav>
  );
};

修改后的Cart组件 #

import { useSelector } from "react-redux";
import { CartItem } from "./CartItem";
import { useEffect, useRef } from "react";

export const Cart = ({ cartActive, setCartActive }) => {
  const cart = useSelector((state) => state.cart.cart);
  const cartRef = useRef();

  const handleClickOutside = (e) => {
    if (cartActive && cartRef.current && !cartRef.current.contains(e.target)) {
      setCartActive(false);
    }
  };

  useEffect(() => {
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [cartActive]);

  return (
    <div className={`cart ${cartActive ? "active" : ""}`} ref={cartRef}>
      {cart.map((item) => {
        return <CartItem key={item.id} item={item} />;
      })}
    </div>
  );
};

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