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

问题描述

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

单击叠加层时会触发 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，那就太好了。

标签： reactjsmaterial-uimodal-dialog

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

问题描述

解决方案

推荐阅读