javascript - 反应 setstate 未触发以关闭 MUI 对话框

Question

与提供的演示不同，我在 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 });
};

Answer 1

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

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

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

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

Answer 2

除了在组件中复制open状态之外，VehicleDialog您还可以使用给它的openand道具来关闭模式。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>
    );
  }
}