Question

我从material-ui网站创建了一个导航栏，并且有一个onClick，当用户单击图标按钮时，导航将重定向到新页面，我希望此后关闭导航。我尝试了不同的方法，但是由于某种原因，它不会关闭。现在唯一要做的就是重定向到新页面，导航抽屉继续保持打开状态。

我有一个名为handleDrawerClose（）的函数来关闭抽屉，一个名为Navigation的const会创建文本和组件，并且我创建了一个名为handleNavigation的const来推送链接，从而使页面重定向。是否有某种方式可以同时调用这两种方法。谢谢。

下面是我的代码：

    const navigation = [
        { to: '/', text: 'Upload', Icon: InboxIcon },
        { to: '/email', text: 'Send', Icon: MailIcon }
    ]

    const NavLinks = ({ links, onClick }) => {

        const _onClick = to => () => onClick(to);

        return (
            <List>
                {links.map(({ to, text, Icon }) => (
                    <ListItem key={to} button onClick={_onClick(to)}>
                        <ListItemIcon>
                            <Icon />
                        </ListItemIcon>
                        <ListItemText primary={text} />
                    </ListItem>
                ))}
            </List>
        )
    }

    const IconArrow = ({ onClick }) => {

        return (
            <IconButton onClick={onClick}>
                <ChevronLeftIcon />
            </IconButton>
        )
    }

    export default withRouter(({ history }) => {
        const classes = useStyles();
        const [_, { logout }] = useAppAuth();
        const [open, setOpen] = React.useState(false);
        const [state, setState] = React.useState({
            left: false,
          });

        function handleDrawerOpen() {
            setOpen(true);
        }

        function handleDrawerClose() {
            setOpen(false);    
        }


        const handleNavigation = to => () => history.push(to);

    return (
            <Fragment>
                <AppBar position='static'>
                    <Toolbar className={classes.toolbar}>
                        <IconButton
                            color='inherit'
                            edge='start'
                            aria-label='open menu drawer'
                            onClick={handleDrawerOpen}
                        >
                            <MenuIcon />
                        </IconButton>

                        <Link to='/'>
                            <img alt='Logo' src={logo} className={classes.image} />
                        </Link>
                        <Typography variant='h6' className={classes.title}>
                            {process.env.REACT_APP_NAME}
                        </Typography>

                        <Tooltip title='Logout'>
                            <Link to='/login'>
                                <IconButton onClick={logout} className={classes.logout}>
                                    <LogoutIcon />
                                </IconButton>
                            </Link>
                        </Tooltip>
                    </Toolbar>
                </AppBar>

                <Drawer
                    className={classes.drawer}
                    variant='temporary'
                    anchor='left'
                    open={open}
                    >
                    <div className={classes.iconArrow}>
                        <IconArrow onClick={handleDrawerClose} />
                    </div>     

                    <Divider />

                    <NavLinks
                        links={navigation}
                        onClick={() => handleNavigation}
                    />
                </Drawer>
            </Fragment>
        )
    })

Answer 1

您为什么不只在处理程序中将其关闭？

const handleNavigation = to => { 
  setOpen(false); // add this
  history.push(to);
}

单击图标按钮reactjs后临时导航栏未关闭

1 个答案: