Question

我已经使用蚂蚁设计的抽屉来显示菜单项，现在我想在有人单击菜单项时关闭抽屉。现在写，我们只能在抽屉外面单击时关闭抽屉，这意味着抽屉被遮盖了。

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

任何人都可以提出一些方法来关闭点击侧抽屉中的抽屉。

Answer 1

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

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

我假设您使用的是功能组件，并且您拥有visible状态和使用useState定义的设置方法，如下所示：

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

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

text

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

<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 }} />图标，但将其替换为所需的内容。

单击内部抽屉后如何关闭蚂蚁设计抽屉

1 个答案: