游客账号登录时，运营配置菜单下编辑配置的抽屉组件无法关闭。

[chenxp-code]

游客账号登录时，运营配置菜单下编辑配置的抽屉组件无法关闭。尝试点击空白区域、关闭按钮、取消按钮均无效。

[weedien]

在src\views\config\index.tsx文件的末尾处，有以下代码，对应页面的添加和编辑按钮。

{/* 弹窗 */}
<Drawer
title="添加/修改"
open={isDrawerOpen}
width={620}
onClose={handleClose}
extra={
  <Space>
  <Button onClick={handleClose}>取消</Button>
  <Button type="primary" onClick={handleSubmit}>
	  确定
  </Button>
  </Space>
}
>
{reviseDrawerContent}
</Drawer>

显然，弹窗的关闭与否和isDrawerOpen有关。

// 改成抽屉
const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
// 弹窗
const [isOpenDrawerShow, setIsOpenDrawerShow] = useState<boolean>(false);

在组件中，isDrawerOpen用于控制添加/修改窗口，isOpenDrawerShow用于控制详情窗口。而添加/修改窗口对应的onClose处理函数如下，该函数只能用于关闭详情窗口，事实上，详情窗口的onClose处理函数就使用了它。

// 点击取消关闭按钮时触发，关闭抽屉
const handleClose = () => {
    setIsOpenDrawerShow(false);
};

解决方法为，给添加/修改窗口设置一个对应的onClose处理函数，比如：

const handleUpdateDrawerClose = () => {
    setIsDrawerOpen(false);
};

也可以修改一下isDrawerOpen和isOpenDrawerShow的命名，有点容易混淆。