Question

我使用 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，那就太好了。

Answer 1

这是因为：

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

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

单击叠加层时，Material UI 对话框未关闭

1 个答案: