Ma boîte de dialogue utilisée à partir de Material UI a été configurée dans son propre composant contrairement aux démos fournies - https:// material-ui.com/demos/dialogs/

Je peux ouvrir la boîte de dialogue et l'état passe de faux à vrai. J'ai ajouté un handleClose pour la fermeture qui devrait remettre l'état à false... mais revient à vrai. Quelqu'un peut-il souligner ce que j'ai fait de mal ici?

https://codesandbox.io/s/zlmj2k3pom

this.state = {
  open: false
};

state = {
  open: false
};

handleClose = () => {
  this.setState({ open: false });
};
1
Tom Rudge 18 mars 2019 à 13:19

2 réponses

Meilleure réponse

Au lieu de dupliquer l'état open dans le composant VehicleDialog, vous pouvez utiliser les accessoires open et onClose qui lui sont donnés pour fermer le modal.

Exemple

class VehicleDialog extends Component {
  render() {
    const { open, id, onClose } = this.props;

    return (
      <React.Fragment>
        <Dialog aria-labelledby="customized-dialog-title" open={open}>
          <DialogTitle id="customized-dialog-title">Modal title</DialogTitle>
          <DialogContent>
            <Typography gutterBottom>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </Typography>
            <Typography gutterBottom>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur
              et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
              auctor.
            </Typography>
            <Typography gutterBottom>
              Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
              cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
              dui. Donec ullamcorper nulla non metus auctor fringilla.
            </Typography>
          </DialogContent>
          <DialogActions>
            <Button color="primary" onClick={() => onClose(id)}>
              Close
            </Button>
          </DialogActions>
        </Dialog>
      </React.Fragment>
    );
  }
}
1
Tholle 18 mars 2019 à 13:54

Vous utilisez la variable open des accessoires dans votre rendu, donc la modification de state.open n'a aucun effet.

  render() {
    const { open, id } = this.props;

Je vous suggère de faire les choses suivantes :

  1. Définir state = { open: this.props.open } dans le constructeur
  2. Ensuite, utilisez la variable state.open dans la fonction de rendu
1
lankovova 18 mars 2019 à 10:27