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

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

我有一个代码沙盒显示问题：

---

如果打开第一个模态并单击“下一步”，则会打开第二个模态。但是如果你关闭它，如果你试图重新打开它，你将再也看不到第二个模态。也就是说，如果你第二次按“打开窗体对话框”。

你只能控制模态内容，而不是有两个模态

函数FormDialog（）{
const[open，setOpen]=React.useState（false）；
const[modalIndex，setModal]=React.useState（0）；
函数handleClickOpen（）{
setModal（0）；
setOpen（真）；
}
函数handleClose（）{
setOpen（假）；
}
函数handleNext（）{
if（modalIndex<1）{
setModal（modalIndex+1）；
}
}
常量FirstModal=（）=>（…）
const SecondModal=（）=>（…）；
返回(
打开窗体对话框
{！modalIndex？：}
取消
下一个
);
}

---

对不起，我想我的问题可能不清楚。问题不在于第一个模态。我想在那里摧毁它。问题是，如果我打开第二个模式并关闭它，我不知道如何重新打开它（因为它是以state open==false装入的）@herodrigues现在它只会在第一次关闭它后打开第二个模式。一旦关闭第二个模态，就永远无法打开第一个模态。不过，我想可以通过在handleClose中将modalIndex设置为0来解决这一问题。谢谢@Herodrigues一个奇怪的副作用是第一个模态在关闭第二个模态后短暂显示。知道如何解决这个问题吗？使用

{！modalIndex？：}

呈现模式内容。不要在

handleClose

中调用

setModal（0）

。更新了我的答案和沙盒。如果正确，则将其标记为已解决：）