单击叠加层时，材质 UI 对话框未关闭答案

【问题标题】：Material UI Dialog not closing when clicking the overlay单击叠加层时，材质 UI 对话框未关闭
【发布时间】：2021-09-24 09:15:09
【问题描述】：

我使用 React 和 Material UI 创建了一个可重用的对话框/模式。当我尝试单击叠加层时，会发生一些奇怪的事情。由于某种原因，脚本直接将 open 再次设置为 true，而不是关闭模式并将 'open' 设置为 false。

点击叠加层时触发了handleClickOpen，我找不到导致此问题的问题。

对话框组件：

    const { onClose, open } = props;

    const handleClose = () => {
        onClose();
    };

    const preventDef = (e) => {
        e.stopPropagation();
    };

    return (
        <Dialog open={open} onClose={onClose} className={className} onClick={handleClose}>
            <Container>
                <Grid container className={`${className}__container`}>
                    <Grid item xs={12} sm={props.colsAmount} onClick={preventDef} className={`${className}__column`}>
                        {props.component}

                        {props.closeButton && (
                            <div className={`${className}__close`} onClick={handleClose}>
                                <Close />
                            </div>
                        )}
                    </Grid>
                </Grid>
            </Container>
        </Dialog>
    );

我加载并触发对话框的组件：

    const [open, setOpen] = React.useState(false);

    const handleClose = (e) => {
        setOpen(false);
    };

    const handleClickOpen = () => {
        setOpen(true);
    };

    return (
        <div className={[classes.ShopCard]} onClick={handleClickOpen}>
            <div className={`${classes.ShopCard}__image`}>
                <div className={`${classes.ShopCard}__image__wrapper`}>
                    <img src={image} alt={alt} />

                    <div className={`${classes.ShopCard}__image__price`}>Vanaf €{price}</div>
                </div>
            </div>

            <div className={`${classes.ShopCard}__content`}>
                <Title title={title} size="h6" />
                <Body>{description}</Body>
            </div>

            <div className={`${classes.ShopCard}__button`}>
                <Button label="In winkelwagen" startIcon={<AddShoppingCart />} />
            </div>

            <CustomDialog
                open={open}
                onClose={handleClose}
                colsAmount={6}
                component={<ShopPopUp />}
                closeButton="true"
            />
        </div>

如果有人能解释为什么打开状态设置为 true，那就太好了。

【问题讨论】：

问题似乎是附加了 handleClickOpen 事件的元素。由于某种原因，当我将事件附加到图像而不是组件本身时，该事件不会被触发。

标签： reactjs material-ui modal-dialog

【解决方案1】：

因为：

<div className={[classes.ShopCard]} onClick={handleClickOpen}>

它在 DOM 中的位置比覆盖层更高，因此它总是会触发。

【讨论】：