Reactjs 模式点击不打开时的antd模式

我有一个antd模式，如下面的代码所示，现在当我选择

Create Manual

并单击

Next

时，

我想关闭此模式并打开另一个模式2

，但单击Next后另一个模式无法打开

这是我的密码。（Codesandbox现场演示-）

请建议一种解决方法，以生成他的第二个模态。谢谢

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Modal, Button, Radio } from "antd";

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectRadio, setselectRadio] = useState("preselect");
  const showModal = () => {
    setIsModalVisible(true);
  };
  const select = (e) => {
    // you can save the value in here
    setselectRadio(e.target.value);
    console.log(e.target.value);
  };
  function modalclick() {
    if (selectRadio === "preselect") {
      alert("pre-select");
    } else {
      //---------------> UNABLE TO OPEN ANOTHER MODAL HERE   <-------------------------------------
      <Modal title="Create Test Suite" visible={isModalVisible}>
        MODAL 2 COMES HERE
      </Modal>;
      alert("manual");
    }
  }

  return (
    <>
      <Button type="primary" style={{ float: "right" }} onClick={showModal}>
        Create Test Suite
      </Button>
      <Modal
        title="Create Test Suite"
        visible={isModalVisible}
        footer={[
          <Button key="cancel" onClick={() => setIsModalVisible(false)}>
            Cancel
          </Button>,

          <Button type="primary" key="next" onClick={modalclick}>
            Next
          </Button>
        ]}
      >
        <Radio.Group
          defaultValue="preselect"
          buttonStyle="solid"
          onChange={(e) => {
            select(e);
          }}
        >
          <Radio value="preselect">Create from Preselect</Radio>
          <Radio value="manual">Create Manual</Radio>
        </Radio.Group>
      </Modal>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Modal，Button，Radio}；
常量应用=（）=>{
常量[isModalVisible，setIsModalVisible]=useState（false）；
const[selectRadio，setelectradio]=使用状态（“预选”）；
常量showModal=（）=>{
setIsModalVisible（真）；
};
常数选择=（e）=>{
//您可以将值保存在此处
SetElectradio（即目标值）；
console.log（如target.value）；
};
函数modalclick（）{
如果（选择收音机==“预选”）{
警报（“预选”）；
}否则{
//--------------->无法在此打开其他模式
{
选择（e）；
}}
>
从预选创建
创建手册
);
};
render（，document.getElementById（“容器”）；

要显示模式2，您可以使用useState钩子或useRef钩子。在这两种方法中，您首先需要将此模式2放入“应用程序”的返回中

使用状态方式：只需使用状态来控制可见性，就像您在模式1中所做的那样，简单

---

useRef-way：这有点复杂。您需要在模态组件内部使用useImperialiveHandle，并创建一个函数（也在内部）控制可见性。因此，在您的页面中，您只需调用组件内部的函数即可显示模式。使用此方法，有关可见性状态控制的逻辑将离开页面并进入组件。

谢谢…

useState

way worked for me:）