在抽屉里点击后如何关闭 ant design 抽屉答案

【问题标题】：How to close ant design drawer after click in-side the drawer在抽屉里点击后如何关闭 ant design 抽屉
【发布时间】：2020-12-26 20:02:41
【问题描述】：

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

<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>

任何人都可以建议一些方法来关闭抽屉内点击抽屉。

【问题讨论】：

@bernatsampera 你能看看这个

标签： reactjs ant-design-pro

【解决方案1】：

您可以通过控制抽屉上visible 属性的值来关闭抽屉。

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

我假设您正在使用功能组件，并且您有一个 visible 状态和使用 useState 定义的 setter，如下所示：

const [visible, setVisible] = useState(false);

您可以通过多种方式进行操作，但一种是使用类型为text 的Button 组件作为关闭抽屉菜单项：

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

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

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

我在这个例子中使用了CloseOutlined 图标，但是用你想要的替换它。

【讨论】：