React setstate 未触发以关闭 MUI 对话框答案

【问题标题】：React setstate not firing to close MUI dialogReact setstate 未触发以关闭 MUI 对话框
【发布时间】：2019-08-08 16:29:06
【问题描述】：

与提供的演示不同，我在 Material UI 中使用的对话框已在其自己的组件中设置 - 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 });
};

【问题讨论】：

标签： javascript reactjs dialog material-ui

【解决方案1】：

您可以使用给它的open 和onClose 属性来关闭模式，而不是在VehicleDialog 组件中复制open 状态。

示例

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

【讨论】：

【解决方案2】：

您在渲染中使用来自 props 的 open 变量，因此更改 state.open 无效。

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

我建议你做接下来的事情：

在构造函数中设置state = { open: this.props.open }
然后在渲染函数中使用state.open变量

【讨论】：