React+MUI开发：下拉菜单选择选项时如何触发Modal/Dialog弹窗

问题根源 #

1. React 组件只有被声明在组件的返回渲染树中，才会被 React 挂载到 DOM 并渲染展示。你在 handleClose 事件回调中调用 showModal() 只是生成了 <AlertDialog> 对应的虚拟 DOM 对象，没有将它放到渲染树中，因此不会被渲染，自然看不到弹窗。
2. 弹窗状态由组件内部自行控制不便于父组件触发，也容易出现状态不同步的问题。

修复方案 #

1. 修改 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 [showAlert, setShowAlert] = React.useState(false);
    const open = Boolean(anchorEl);

    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        // 点击菜单项后触发弹窗显示
        setShowAlert(true);
        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>
            {/* 将弹窗放到渲染树中，状态为true时渲染显示 */}
            {showAlert && <AlertDialog onClose={() => setShowAlert(false)} />}
        </div>
    );
};

export default DropdownMenu;

2. 改造 AlertDialog 组件

将弹窗的关闭回调改为父组件传入，由父组件统一控制显示逻辑：

interface AlertDialogProps {
  // 接收父组件传入的关闭回调
  onClose: () => void;
}

const AlertDialog = ({ onClose }: AlertDialogProps) => {
    return (
        <div>
            <Dialog
                open={true}
                onClose={onClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <DialogTitle id="alert-dialog-title">
                    {"提示"}
                </DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        你确定要执行该操作吗？
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={onClose}>取消</Button>
                    <Button onClick={onClose} autoFocus>
                        确认
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

多选项适配方案 #

如果后续需要不同选项对应不同弹窗，只需把 showAlert 状态替换为存储当前选中的选项标识，渲染时根据标识判断渲染对应弹窗即可。

内容的提问来源于stack exchange，提问作者elderlyman