模态点击上的 antd 模态未打开

Question

我有一个 antd modal 如下代码所示，现在当我 select Create Manual 并点击 Next, I want to close this modal and open another Modal2 但在单击下一步后另一个模式没有打开。

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

请提出一个解决方法来生成他的第二个模态。谢谢

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

Answer 1

要显示模式 2，您可以使用 useState hook 或 useRef勾。在这两种方法中，您需要先将此模态 2 放入“应用程序”的 return。

useState 方式：只需使用 state 来控制可见性，就像您在 modal 1[ 中所做的那样=27=], 简单.

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

模态点击上的 antd 模态未打开

antd modal on modal click not opening

modal-dialog

reactjs

antd