时间戳

首页 > 解决方案 > 我的处理程序没有设置状态 - Material UI

reactjs - 我的处理程序没有设置状态 - Material UI

问题描述

我正在使用 Material UI 中的组件“对话框”。

当我单击按钮关闭对话框（触发handleCLose）时，它不会将状态设置为false. 我在这里读到了一个类似的问题：OnClick Listeners not working after close full-screen dialog using react-material-ui 但到目前为止我还没有设法保存它。

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});


function Information() {

    const [open, setOpen] = React.useState(false);
    const handleClickOpen = () => {
        setOpen(true);
    };


    const handleClose = () => {
        setOpen(false);
        console.log(open)
    };

    return (
        <div onClick={()=>handleClickOpen()}>
            Information
            <Dialog
                open={open}
                TransitionComponent={Transition}
                keepMounted
                onClose={handleClose}
                aria-labelledby="alert-dialog-slide-title"
                aria-describedby="alert-dialog-slide-description"
            >
                <DialogTitle id="alert-dialog-slide-title">{"Information"}</DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-slide-description">
                      Blablabla
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary"> // The function is here
                        Close
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

export default Information

标签： reactjs

解决方案

看起来您已经将对话框包装在一个div带有onClick将对话框设置为打开的函数中。发生的事情是onClick每当您在对话框内单击时都会调用它。因此，即使您单击关闭按钮，它也会调用handleClickOpen. 尝试将它们分开：

    return (
        <>  // Add wrapping fragment
            <div onClick={()=>handleClickOpen()}>
                Information
            </div> // close div here
            <Dialog
                open={open}
                TransitionComponent={Transition}
                keepMounted
                onClose={handleClose}
                aria-labelledby="alert-dialog-slide-title"
                aria-describedby="alert-dialog-slide-description"
            >
                <DialogTitle id="alert-dialog-slide-title">{"Information"}</DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-slide-description">
                      Blablabla
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">
                        Close
                    </Button>
                </DialogActions>
            </Dialog>
        </>
    );
}

推荐阅读