从下拉列表中打开一个模式（或对话），询问用户是否愿意采取行动

Question

我想在用户从下拉菜单中选择一个选项时打开一个模式（或对话框）。

最终在下拉列表中会有几个选项，并且根据点击的是哪个下拉选项，将调用和呈现不同的 dialogues/modals。现在 - 如何让 modal/dialogue 打开下拉菜单事件？

我目前正在使用 handleClose 处理程序尝试打开对话，因为该事件应该很容易从 MUI Menu 和 [=15= 的文档中获取和使用].

对 DropdownMenu 组件（运行良好并显示下拉菜单）的发起调用发生在 table 通过单击图标

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

DropdownMenu 组件（本身也运行良好，除了不触发 dialogue/modal）看起来像这样

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

只要您想显示 dialog/modal.

，就可以使用状态变量来触发 DropdownMenu 组件中的 modal

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

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

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

然后在 DropdownMenu 的 JSX 中的某处，您可以像这样有条件地渲染 AlertDialog 组件

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

最后，更新您的 AlertDialog 组件以使用道具来处理模态的 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>
  );
}

从下拉列表中打开一个模式（或对话），询问用户是否愿意采取行动

Open a modal (or dialogue) from a dropdown asking the user if they would like to take an action

modal-dialog

menuitem

typescript

reactjs

material-ui