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

【问题标题】：My handler does not set the state - Material UI我的处理程序没有设置状态 - Material UI
【发布时间】：2023-03-20 16:13:02
【问题描述】：

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

当我单击按钮关闭对话框（触发handleCLose）时，它不会将状态设置为false。我在这里读到了类似的问题：OnClick Listeners not working after closing 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

【问题讨论】：

状态设置器是异步的，因此您可能不会立即通过控制台日志查看更新后的值。如果您将控制台日志移到 return 之前，您仍然看不到更新的值吗？
即使在函数之外，它也告诉我状态尚未更新。我还可以检查它没有更新，因为Dialog 框没有消失

标签： reactjs

【解决方案1】：

看起来您已将对话框包装在 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>
        </>
    );
}

【讨论】：