对话框打开时如何关闭MenuItem

时间:2019-11-02 19:55:37

标签: reactjs dialog material-design material-ui react-props

我正在打开\从MenuItem调用对话框。

问题在于菜单将保持打开状态。按下“关于”菜单时,如何确保同时关闭菜单。

return (
    <div onMouseLeave={handlePopperClose}>
        <MuiThemeProvider theme={theme}>
            <MaterialLink
                underline="none"
                component="button"
                aria-owns={anchorEl ? 'help-over-popper' : undefined}
                onMouseEnter={handlePopperOpen}
                color="inherit">
                <Typography variant="h6" color="inherit" >Help</Typography>
            </MaterialLink>
        </MuiThemeProvider>
        <Popper
            id="help-over-popper"
            open={Boolean(anchorEl)}
            anchorEl={anchorEl}
            keepMounted={false}
            placement="bottom-start">
            <Zoom in={true}>
                <Paper>
                    <MenuList id="simple-menu">
                        <Divider />
                        <MenuItem onClick={handleClickOpen}>
                            <Typography variant="subtitle1" >About</Typography>
                        </MenuItem>
                    </MenuList>
                </Paper>
            </Zoom>
        </Popper>
        <Dialog
            id="mouse-over-dialog"
            open={open}
            TransitionComponent={Transition}
            onClose={handleClose}>
            <DialogTitle id="alert-dialog-slide-title">{"Application"}</DialogTitle>
            <DialogContent dividers>
                <Typography gutterBottom>
                    The system provides data visibility to the on-site team members in order to assist with daily tasks
                </Typography>
            </DialogContent>
            <DialogActions>
                <Button onClick={handleClose} autoFocus color="primary">Ok</Button>
            </DialogActions>
        </Dialog>
    </div >

enter image description here

谢谢

0 个答案:

没有答案