Реакция установки не запускается, чтобы закрыть диалоговое окно MUI

Question

Мое диалоговое окно, используемое из пользовательского интерфейса материалов, было настроено в его собственном компоненте, в отличие от предоставленных демонстраций - https://material -ui.com / demos / dialogs /

Я могу открыть диалоговое окно, и состояние меняется с ложного на истинное. Я добавил handleClose для закрытия, которое должно вернуть состояние в состояние false ... но снова возвращается в состояние true. Кто-нибудь может указать на то, что я здесь сделал неправильно?

https://codesandbox.io/s/zlmj2k3pom

this.state = {
  open: false
};

state = {
  open: false
};

handleClose = () => {
  this.setState({ open: false });
};

Answer 1

Вместо дублирования состояния open в компоненте VehicleDialog вы можете использовать предоставленные ему реквизиты open и onClose, чтобы закрыть модал.

Пример

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>
    );
  }
}

Answer 2

Вы используете open переменную из реквизита в вашем рендере, поэтому изменение state.open не имеет никакого эффекта.

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

Я предлагаю вам сделать следующее:

1. Набор state = { open: this.props.open } в конструкторе
2. Затем используйте state.open переменную в функции визуализации