使用 ReactJS 上的 Props 打開和關閉對話框？ 我的模態保持打開而不關閉

Question

我創建了一個從其他組件獲取道具的 Dialog 組件

        function ConfimationDialog(props)   {
            return (
                <Dialog           
                PaperProps={{style: {backgroundColor: props.colorBackground}}}
                open={props.modalName}
                onClose={props.cancelAction}
                >
                    <DialogTitle id="alert-dialog-title">{props.textTitle}</DialogTitle>
                    <DialogContent >
                        <DialogContentText id="alert-dialog-description">
                        {props.textDetail}
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>            
                        <Button variant="contained" onClick={props.confirmAction} color={props.buttonColor} >
                        {props.textConfirm}
                        </Button>
                        <Button variant="contained" onClick={props.cancelAction}  >
                        {props.textCancel}
                        </Button>
                    </DialogActions>
                </Dialog>
            )
        }

調用對話框的組件：

        <ConfirmationDialog
            modalName=          'modalSaida'
            backgroundColor=    'primary'
            buttonColor=        'secondary'
            cancelAction=       {handleCancelar}
            confirmAction=      {handleConfirmar}

            textTitle=          'Você deseja remover os clientes que foram marcado?'
            textDetail=         'Você não poderá voltar atrás.'
            textConfirm=        'Confirmar'
            textCancel=         'Cancelar'
        />

行動：

        const [modalSaida, setModalSaida] = React.useState(false);

        function handleCancelar()    {  
            setModalSaida(false);
        }    

        function handleConfirmar()    {  
            setModalSaida(false);
            dispatch(Actions.deleteClientes(props.idSelected));   
        } 

但我只是設法讓 confirmAction 工作。 關閉模式的操作根本不起作用，即使我啟動應用程序也會打開我的模式。

那個 cancelAction 道具正在進入 Dialog 組件，但沒有調用 function

Answer 1

我認為你的問題是當我認為它被用作 boolean 來確定對話框是否打開時，你將 Dialog open 屬性設置為名稱。

來源： https://material-ui.com/api/dialog/

Answer 2

感謝 Dilan Wilding，這就是解決方案：

為了工作，我只是改變了這個：

modalName='modalSaida'

對此：

modalName= {modalSaida}

在這里：

        <ConfirmationDialog
            modalName=          {modalSaida}
            backgroundColor=    'primary'
            buttonColor=        'secondary'
            cancelAction=       {handleCancelar}
            confirmAction=      {handleConfirmar}               
            textTitle=          'Você deseja remover os clientes que foram marcados?'
            textDetail=         'Você não poderá voltar atrás.'
            textConfirm=        'Confirmar'
            textCancel=         'Cancelar'
        />