Question

在React中，我有两个模态Modal1和Modal2，我希望Modal1中的一个按钮可以打开Modal2。如何控制模态的打开状态，以便可以打开和关闭模态？

我有一个显示问题的代码框： https://codesandbox.io/s/q86nlljvq4

如果打开第一个模态并单击“下一步”，则将打开第二个模态。但是，如果您将其关闭，则尝试重新打开它时将永远不会再看到第二个模式。也就是说，如果您再次按下“打开表单对话框”。

Answer 1

您只能控制模式内容，而不能控制两个模式。

function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [modalIndex, setModal] = React.useState(0);

  function handleClickOpen() {
    setModal(0);
    setOpen(true);
  }

  function handleClose() {
    setOpen(false);
  }

  function handleNext() {
    if (modalIndex < 1) {
      setModal(modalIndex + 1);
    }
  }

  const FirstModal = () => (...)

  const SecondModal = () => (...);

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        {!modalIndex ? <FirstModal /> : <SecondModal />}
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleNext} color="primary">
            Next
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

https://codesandbox.io/s/xl63604p7w

如何顺序控制两个模态的打开状态

1 个答案: