Chakra组件中自定义isOpen失效问题排查及正确用法

常见问题原因 #

• 自定义状态与useDisclosure逻辑脱节：如果自行声明了const [isOpenMenu, setIsOpenMenu] = useState(false)，但未与useDisclosure的onOpen/onClose联动，或直接忽略useDisclosure的状态管理，会导致Drawer状态无法同步更新。
• 状态源冲突：同时使用useDisclosure的isOpen和自定义isOpenMenu，却未做状态同步，比如Drawer绑定自定义状态，但触发按钮调用useDisclosure的onOpen，两者状态完全脱节。
• 触发事件绑定错误：按钮点击时直接修改自定义状态，但Drawer的isOpen属性绑定的是useDisclosure的默认状态，导致操作与Drawer显示状态不匹配。

正确使用方式 #

方式1：直接使用useDisclosure默认状态（无额外逻辑时推荐） #

无需自定义状态，直接用useDisclosure返回的isOpen、onOpen、onClose即可：

import { useDisclosure, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, DrawerHeader, DrawerBody, Button } from '@chakra-ui/react';

function NavDrawer() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>打开菜单</Button>
      <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>导航菜单</DrawerHeader>
          <DrawerBody>
            {/* 菜单内容 */}
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
}

方式2：自定义状态配合useDisclosure（需额外逻辑时） #

如果需要根据其他条件控制Drawer显隐，要确保自定义状态与useDisclosure的回调联动：

import { useState, useEffect } from 'react';
import { useDisclosure, Drawer, DrawerOverlay, DrawerContent, DrawerCloseButton, DrawerHeader, DrawerBody, Button } from '@chakra-ui/react';

function NavDrawer() {
  const [isOpenMenu, setIsOpenMenu] = useState(false);
  // 通过useDisclosure的回调同步自定义状态
  const { onOpen, onClose } = useDisclosure({
    defaultIsOpen: isOpenMenu,
    onOpen: () => setIsOpenMenu(true),
    onClose: () => setIsOpenMenu(false),
  });

  // 示例额外逻辑：路由变化时关闭Drawer
  useEffect(() => {
    setIsOpenMenu(false);
  }, [router.pathname]);

  return (
    <>
      <Button onClick={onOpen}>打开菜单</Button>
      <Drawer isOpen={isOpenMenu} placement="left" onClose={onClose}>
        {/* 菜单内容 */}
      </Drawer>
    </>
  );
}

典型错误示例及修正 #

如果你的代码类似下面这种，就会出现失效问题：

// 错误示例
const { isOpen, onOpen, onClose } = useDisclosure();
const [isOpenMenu, setIsOpenMenu] = useState(false);

// 按钮修改自定义状态，但Drawer绑定useDisclosure的isOpen
<Button onClick={() => setIsOpenMenu(!isOpenMenu)}>打开菜单</Button>
<Drawer isOpen={isOpen} onClose={onClose}>...</Drawer>

修正思路：统一状态源，要么全用useDisclosure的isOpen，要么将自定义状态与useDisclosure的回调绑定，确保两者状态同步。

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