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组件中，但是没有调用该函数

Answer 1

我认为您的问题是，当我认为Dialog open属性用作确定对话框是否打开的布尔值时，将其设置为name。

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

Answer 2

感谢Dillan 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'
        />

在ReactJS上使用道具打开和关闭对话框？我的模态保持打开且不关闭

2 个答案: