我从 material-ui 网站创建了一个导航栏,我有一个 onClick,当用户单击图标按钮时,导航将被重定向到一个新页面,我希望导航随后关闭。我尝试过不同的东西,但由于某种原因它不会关闭。 它现在唯一要做的就是重定向到一个新页面,并且抽屉导航继续保持打开状态。
我有一个名为 handleDrawerClose() 的函数,用于关闭抽屉,一个名为 navigation 的常量,用于创建文本和组件,我创建了一个名为 handleNavigation 的常量,用于推送链接,从而使页面重定向。有没有办法以某种方式调用这两个。谢谢。
下面是我的代码:
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>
)
})
最佳答案
为什么不在处理程序中关闭它?
const handleNavigation = to => {
setOpen(false); // add this
history.push(to);
}
关于javascript - 单击图标按钮reactjs后临时导航栏未关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59111630/