从下拉菜单中打开一个模式(或对话框)，询问用户是否想采取行动

Question

当用户从下拉菜单中选择一个选项时，我想打开一个模式(或对话框)。

最终在下拉菜单中会有几个选项，不同的对话框/模态将被调用并渲染，这取决于点击了哪个下拉菜单。现在-我如何得到模态/对话与下拉菜单事件打开?

我目前正在使用handleClose处理程序来尝试打开一个对话，因为该事件应该很容易从MUIMenu和MenuItem的文档中抓取和使用。

对DropdownMenu组件的初始调用(它运行良好并显示下拉菜单)通过单击图标在表中发生

<DropdownMenu options={['Show modal or dialogue to the user']}>
<MoreHorizIcon />
</DropdownMenu>

DropdownMenu组件(除了不触发对话框/模态之外，它本身也工作得很好)看起来像这样

interface IProps extends Omit<unknown, 'children'> {
children: any;
options: string[];
}
const ITEM_HEIGHT = 48;
const DropdownMenu = ({ children, options }: IProps) => {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const showModal = () => {
return (
<AlertDialog />
)
}
const handleClose = () => {
//the native alert dialogue works well
alert('I want to show a dialog or modal the same way this alert shows up and ask the user if they are sure they want to delete something')
//why isn't the custom alert dialog being called?
showModal();
setAnchorEl(null);
};
return (
<div>
<IconButton
aria-label="more"
id="more-button"
aria-controls="long-menu"
aria-expanded={open ? 'true' : undefined}
aria-haspopup="true"
onClick={handleClick}
>
{children}
</IconButton>
<Menu
id="dropdownmenu"
MenuListProps={{
'aria-labelledby': 'more-button'
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
PaperProps={{
style: {
maxHeight: ITEM_HEIGHT * 4.5,
width: '20ch'
}
}}
>
{options.map(option => (
<MenuItem key={option} onClick={handleClose} >
{option}
</MenuItem>
))}
</Menu>
</div>
);
};
export default DropdownMenu;

我正在使用的示例启动对话框看起来像这样

const AlertDialog = () => {
const [open, setOpen] = React.useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Sweet Filler Dialog"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>NO</Button>
<Button onClick={handleClose} autoFocus>
YES
</Button>
</DialogActions>
</Dialog>
</div>
);
}

Answer 1

您可以使用状态变量来触发DropdownMenu组件中的modal，无论何时您想要显示对话框/模态

const [isModalOpen, setIsModalOpen] = React.useState(false);

，然后在handleClose中，您可以更新模态状态以打开模态。

const handleClose = () => {
setIsModalOpen(true)
setAnchorEl(null);
};

然后在你的JSXDropdownMenu,这样你可以有条件地渲染AlertDialog组件

{isModalOpen ? <AlertDialog open={isModalOpen} setOpen={setIsModalOpen} /> : null}

最后，更新你的AlertDialog组件，使用props来处理模式的closing。

const AlertDialog = ({ open, setOpen }) => {
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Sweet Filler Dialog"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Are you sure?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>NO</Button>
<Button onClick={handleClose} autoFocus>
YES
</Button>
</DialogActions>
</Dialog>
</div>
);
}