我创建了一个函数，当我点击侧边栏外面，它会隐藏它，我还有一个按钮，切换显示和隐藏侧边栏。但是当我把它们组合在一起时，按钮不能正常工作，它只显示侧边栏但不能关闭它，只有当我在它外面单击时才会关闭侧边栏

单击外部关闭函数:

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };

我的返回:

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };

导航条CSS:

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };

谢谢。

顺晟科技：

以这种方式更新状态不会立即更新状态，而是计划更新（您可以阅读文档）。当您依赖于您以前的状态（在本例中依赖于以前的状态）时，请使用以下技术。因此，只需更新您的内容就能解决问题。

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };

（请在评论中告诉我这是否有用）

打开菜单时，可以对管理按钮onclick使用其他状态:

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };

并在单击功能中管理它:

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };

和onclick中的按钮使用条件:

     const ref = useRef(null);
  useEffect(() => {
    document.addEventListener("mousedown", Clickout);
    return () => {
      document.removeEventListener("mousedown", Clickout);
    };
  }, []);

  const Clickout = (eve) => {
    if (ref.current && !ref.current.contains(eve.target)) {
      setShow(false);
    }
  };