Reactjs 点击抽屉侧面后如何关闭ant design抽屉

我曾经使用ant design drawer来显示菜单项，现在我想在有人单击菜单项时关闭抽屉。写现在我们只能关闭抽屉点击外面的抽屉，这意味着抽屉屏蔽区

<Drawer
                className="draw-body"
                placement="right"
                closable={false}
                onClose={onClose}
                visible={visible}
            >
                
                
                
                <Nav className="mr-auto">
                    <Nav.Link  key="1" as={Link} to="/">
                        <DashboardOutlined style={{ fontSize: '18px', color: '#fff' }} /> Dashboard
                    </Nav.Link>
                    {menuList}
                </Nav>
                <Nav>
                    <Row>
                        <Col md={12}>
                            {!sidebar?(
                                <Nav.Link>
                                    <a href="#" onClick={() => handleLogout()}><LogoutOutlined style={{ fontSize: '18px', color: '#fff' }}/> Logout</a>
                                </Nav.Link>
                                
                                ) : null }
                        </Col>
                        <Col md={12}>
                            <Nav.Link  key="1" as={Link} to={routePaths.RESET_PASSWORD} style={{ color: '#fff' }}>
                                <RollbackOutlined style={{ fontSize: '18px', color: '#fff' }} />
                                <span className="menu-size"> Change Password </span>
                            </Nav.Link>
                        </Col>
                        <Col md={12}>
                            <Nav.Link  key="1" as={Link} to={props.personProfileMenu} style={{ color: '#fff' }}>
                                <Icon type="user" style={{ fontSize: '18px', color: '#fff' }}/>
                                <span className="menu-size"> My Profile </span>
                            </Nav.Link>
                        </Col>                                
                    </Row>
                </Nav>
            </Drawer>

仪表板
{menuList}
{！侧边栏(
)：null}
修改密码
我的个人资料

请任何人提出一些方法关闭抽屉点击在侧抽屉。

---

您可以通过控制抽屉上可见的

道具的值来关闭抽屉

因此，要隐藏抽屉的菜单项可以使用处理函数处理
onClick
事件，该函数将
visible
的值设置为
false

我假设您使用的是一个功能组件，并且您有一个
可见的
状态，并使用
useState
定义了setter，如下所示：

您可以通过多种方式进行操作，但一种是使用
按钮
组件，键入
文本
，作为关闭抽屉菜单项：

<Button
  onClick={() => setVisible(false)}
  icon={<CloseOutlined style={{ fontSize: '18px', color: 'black' }} />}
  type="text">
  <span className="menu-size">Close Drawer</span>
</Button>

setVisible（false）}
图标={}
type=“text”>
封闭抽屉

您还可以通过设置绝对位置在抽屉的右上角制作一个图标按钮：

<Button
  icon={<CloseOutlined />}
  onClick={() => setVisible(false)}
  type="text"
  style={{ position: 'absolute', top: 0, right: 0 }}
/>

setVisible（false）}
type=“text”
样式={{position:'absolute'，顶部：0，右侧：0}}
/>

在本例中，我使用了
CloseOutlined
图标，但请用您想要的任何东西替换它。
@bernatsampera您能看看这个吗
<Button
  icon={<CloseOutlined />}
  onClick={() => setVisible(false)}
  type="text"
  style={{ position: 'absolute', top: 0, right: 0 }}
/>