Reactjs 物料界面单击警报立即触发

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

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>
)
};

const ResponsiveMenu=（{setMenu，open，closeMenu}）=>{
const classes=useStyles（）；
返回(
{['Home'，'About'，'Feedback'，'Login'，'Projects'].map（（文本，索引）=>{
如果（文本==“关于”）{
返回(
关于
{['a'，'b'，'c'].map（文本=>{
返回(
);
})}
);
}否则{
返回(
)
}
})}
)
};

您不需要单击AwayListener来关闭抽屉，请使用modalProps：

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