Material立即触发

Question

因此，似乎一旦我点击打开我的抽屉，点击离开侦听器同时启动并立即关闭。这是因为我点击一个菜单图标来打开它，但是那个菜单图标也在抽屉外面，所以它就会立即关闭。对如何解决这个问题有什么想法吗？

const ResponsiveMenu = ({setMenu, open, closeMenu}) => {
const classes = useStyles();
return (
    <ClickAwayListener onClickAway={closeMenu}>
    <Drawer open={open}>
        <IconButton className={classes.menuCloseIcon} onClick={setMenu}>
            <CloseIcon/>
        </IconButton>
        <img src="vectoredLogo.png" className={classes.menuLogo}/>
        <Divider/>
        <List>
            {['Home', 'About', 'Feedback', 'Login', 'Projects'].map((text, index) => {
                if (text === "About") {
                    return (
                        <ListItem className={classes.expansionHolder}>
                            <ExpansionPanel className={classes.expansionMenu}>
                                <ExpansionPanelSummary
                                    expandIcon={<ExpandMoreIcon/>}
                                    aria-controls="panel1a-content"
                                    className={classes.expansionLink}
                                >
                                    <Typography>About</Typography>
                                </ExpansionPanelSummary>
                                <ExpansionPanelDetails>
                                    <Typography>
                                        {['a', 'b', 'c'].map(text => {
                                            return (
                                                <ListItem button key={text} component="a"
                                                          href="https://www.google.com">
                                                    <ListItemText className={classes.menuLink} primary={text}/>
                                                </ListItem>
                                            );
                                        })}
                                    </Typography>
                                </ExpansionPanelDetails>
                            </ExpansionPanel>
                        </ListItem>
                    );
                } else {
                    return (
                        <ListItem button key={text} component="a" href="https://www.google.com">
                            <ListItemText className={classes.menuLink} primary={text}/>
                        </ListItem>
                    )
                }
            })}
        </List>
    </Drawer>
    </ClickAwayListener>
)
};

Answer 1

您不需要ClickAwayListener来关闭抽屉，请使用modalProps：

  <Drawer ModalProps={{ onBackdropClick: closeMenu }}>