我有一種狀態在反應

// sidebar toggled
const [sidebarToggled, setSidebarToggled] = useState(false);

sidebarToggled(false) =側欄可見

sidebarToggled(true) =側欄隱藏

我有一個切換側邊欄的按鈕

<button onClick={()=>setSidebarToggled(!sidebarToggled)}>Toggle</button>

預期行為

當我在桌面屏幕上(大于768px)時，sidebarToggled為true，這意味著側邊欄可見，當我使用Chrome console檢查響應或最小化和最大化屏幕時，當屏幕小于768px時，sidebarToggled設置為true以隱藏側邊欄，當屏幕大于768px時，sidebarToggled設置為false以使其再次可見。它正在工作，我通過下面的代碼實現了這一點

// toggle sidebar when screen reaches 768px
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth <= 768) {
        setSidebarToggled(true);
      }
      else{
        setSidebarToggled(false);
      }
    };
    // Add event listener for window resize
    window.addEventListener('resize', handleResize);

    // Cleanup the event listener on component unmount
    return () => window.removeEventListener('resize', handleResize);
  }, []);

現在到了要點

如果我在一個大于768像素的設備上點擊按鈕，將sidebarToggled設置為true，那么無論屏幕大小如何，sidebarToggled都應該保持true，并且側邊欄應該保持隱藏。類似地，如果我在移動設備上將sidebarToggled設置為false，那么最小化或最大化應該不會對sidebarToggled產生影響，它應該始終保持為false并可見。

http://webapplayers.com/homer_admin-v2.0/index.html

來自上述網站的這種行為是我在React應用程序中想要的。

從概念上講，你有兩種狀態。

通過用戶點擊按鈕來明確設置偏好設置 屏幕尺寸低于或高于閾值 您不能也不需要將兩者都表示為一個布爾值。將狀態一分為二，并從兩個狀態變量中派生出UI狀態。在這里，我將邏輯提取到一個鉤子中。

const useSidebarState = (widthThreshold = 768) => {
  const [sidebarExplicitlyHidden, setSidebarExplicitlyHidden] = useState(null);
  const [screenWidthAboveThreshold, setScreenWidthAboveThreshold] = useState(
    window.innerWidth > widthThreshold
  );
  useEffect(
    () => {
      const handleResize = () => void setScreenWidthAboveThreshold(
        window.innerWidth > widthThreshold
      );
      handleResize();
      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    },
    [widthThreshold]
  );
  const toggleSidebar = useCallback(
    () => void setSidebarExplicitlyHidden(prevValue => !prevValue)
  );
  return {
    sidebarToggled: sidebarExplicitlyHidden ?? !screenWidthAboveThreshold,
    toggleSidebar
  };
};

將toggleSidebar作為單擊處理程序傳遞給切換按鈕。