如何在蚂蚁设计中关闭第一个模态并打开第二个模态

Question

我想在打开第一个模态时创建一个嵌套模态，它们将是一张不同的卡片，当我点击卡片时，我想打开第二个模态并删除 ant design 中的第一个模态。我正在使用 react js。

请帮帮我

Answer 1

只需创建两个如下所示的状态来处理模型。

const App = () => {
  const [isMainModel, setMainModel] = useState(false); // First Model
  const [isSubModel, setSubModel] = useState(false); // Second Model

  const onSubModel = (e, stateSub = true, stateMain = false) => {
    setMainModel(stateMain);
    setSubModel(stateSub);
  };

  return (
    <>
      <Button type="primary" onClick={() => setMainModel(true)}>
        Open Modal
      </Button>
      <Modal
        title="Main Modal"
        visible={isMainModel}
        onOk={() => setMainModel(false)}
        onCancel={() => setMainModel(false)}
      >
        <Button type="primary" onClick={onSubModel}>
          Open Modal
        </Button>
      </Modal>
      <Modal
        title="Sub Modal"
        visible={isSubModel}
        onOk={(e) => onSubModel(e, false)}
        onCancel={(e) => onSubModel(e, false)}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

export default App;

https://codesandbox.io/s/model-in-model-with-ant-68189293-6i99b?file=/src/App.js

如果您需要进一步的支持，请告诉我。