ant/modal组件中请问如何通过API的方式进行关闭命令式modal呢？

参考：antd/modal，我们可以使用api的方式打开modal：modal.warning(config);
请问：如何通过API的方式进行关闭modal呢？我查看了API，貌似没有：modal.close之类的方法实现。

import React, { createContext } from 'react';
import { Button, Modal, Space } from 'antd';

const ReachableContext = createContext<string | null>(null);
const UnreachableContext = createContext<string | null>(null);

const config = {
  title: 'Use Hook!',
  content: (
    <>
      <ReachableContext.Consumer>{(name) => `Reachable: ${name}!`}</ReachableContext.Consumer>
      <br />
      <UnreachableContext.Consumer>{(name) => `Unreachable: ${name}!`}</UnreachableContext.Consumer>
    </>
  ),
};

const App: React.FC = () => {
  const [modal, contextHolder] = Modal.useModal();

  return (
    <ReachableContext.Provider value="Light">
      <Space>
        <Button
          onClick={async () => {
            const confirmed = await modal.confirm(config);
            console.log('Confirmed: ', confirmed);
          }}
        >
          Confirm
        </Button>
        <Button
          onClick={() => {
            modal.warning(config);
          }}
        >
          Warning
        </Button>
        <Button
          onClick={async () => {
            modal.info(config);
          }}
        >
          Info
        </Button>
        <Button
          onClick={async () => {
            modal.error(config);
          }}
        >
          Error
        </Button>
      </Space>
      {/* `contextHolder` should always be placed under the context you want to access */}
      {contextHolder}

      {/* Can not access this context since `contextHolder` is not in it */}
      <UnreachableContext.Provider value="Bamboo" />
    </ReachableContext.Provider>
  );
};

export default App;

前端 antd modal

阅读 247

AI BotBETA

在 `antd/modal` 中，通过 API 方式打开的 modal（如 `modal.warning(config);`）通常是由 `Modal.useModal()` 钩子管理的。要关闭这种通过 API 方式打开的 modal，你需要使用 `modal.destroyAll()` 或者 `modal.destroy(key)` 方法。

- `modal.destroyAll()` 会关闭所有通过 `Modal.useModal()` 创建的 modal。
- `modal.destroy(key)` 会关闭具有指定 `key` 的 modal。当你通过 API 方式（如 `modal.warning(config)`）打开 modal 时，`antd` 会在内部为每个 modal 分配一个唯一的 `key`。不过，当你直接使用 `modal.warning(config)` 等方法时，这个 `key` 通常不会直接暴露给用户。因此，在大多数情况下，你可能需要使用 `modal.destroyAll()` 来关闭所有 modal，除非你手动管理每个 modal 的 `key`。

在你的例子中，如果你想关闭通过 `modal.warning(config)` 打开的 modal，你可以调用 `modal.destroyAll()`。例如：

<Button
onClick={() => {

modal.destroyAll(); // 关闭所有通过 Modal.useModal() 创建的 modal

}}

Close All Modals
</Button>


注意，如果你需要更精细地控制每个 modal 的关闭，你可能需要在使用 `Modal.useModal()` 时手动管理每个 modal 的 `key`，并在需要时调用 `modal.destroy(key)`。然而，这在直接使用 `modal.warning(config)` 等 API 方法时并不常见，因为这些方法通常用于简单的、一次性的模态对话框。

2 个回答

得票最新

Seven

1.5k127

发布于
12 月 24 日广东

✓ 已被采纳

可以用modal.destroy() 方法来关闭

import React, { createContext } from 'react';
import { Button, Modal, Space } from 'antd';

const ReachableContext = createContext<string | null>(null);
const UnreachableContext = createContext<string | null>(null);

const config = {
  title: 'Use Hook!',
  content: (
    <>
      <ReachableContext.Consumer>{(name) => `Reachable: ${name}!`}</ReachableContext.Consumer>
      <br />
      <UnreachableContext.Consumer>{(name) => `Unreachable: ${name}!`}</UnreachableContext.Consumer>
    </>
  ),
};

const App: React.FC = () => {
  const [modal, contextHolder] = Modal.useModal();

  return (
    <ReachableContext.Provider value="Light">
      <Space>
        <Button
          onClick={async () => {
            const modalInstance = modal.confirm(config);
            console.log('Confirmed: ', modalInstance);
            // 3秒后自动关闭模态框
            setTimeout(() => {
              modalInstance.destroy();
            }, 3000);
          }}
        >
          Confirm
        </Button>
        <Button
          onClick={() => {
            const modalInstance = modal.warning(config);
            // 3秒后自动关闭模态框
            setTimeout(() => {
              modalInstance.destroy();
            }, 3000);
          }}
        >
          Warning
        </Button>
        <Button
          onClick={() => {
            const modalInstance = modal.info(config);
            // 3秒后自动关闭模态框
            setTimeout(() => {
              modalInstance.destroy();
            }, 3000);
          }}
        >
          Info
        </Button>
        <Button
          onClick={() => {
            const modalInstance = modal.error(config);
            // 3秒后自动关闭模态框
            setTimeout(() => {
              modalInstance.destroy();
            }, 3000);
          }}
        >
          Error
        </Button>
      </Space>
      {/* `contextHolder` should always be placed under the context you want to access */}
      {contextHolder}

      {/* Can not access this context since `contextHolder` is not in it */}
      <UnreachableContext.Provider value="Bamboo" />
    </ReachableContext.Provider>
  );
};

export default App;