Ant Design：触发onOk时如何条件性阻止模态框关闭

当然可以实现，核心思路是手动控制模态框的关闭时机，而非依赖默认的自动关闭行为。以下是两种常用的实现方式：

方法一：利用onOk回调的close参数 #

useModal弹出的对话框（confirm/open）的onOk回调会传入一个close函数，默认框架会自动调用它关闭模态框，但你可以根据条件决定是否执行这个函数：

import { useModal, message } from 'antd';

const YourComponent = () => {
  const [modal, contextHolder] = useModal();

  const handleOpenModal = () => {
    modal.confirm({
      title: '确认操作',
      content: '请检查输入内容是否正确',
      onOk: (close) => {
        // 替换成你的实际条件判断（比如表单验证、数据校验）
        const isDataValid = false;

        if (!isDataValid) {
          message.error('数据不合法，请重新检查');
          return; // 不调用close，模态框保持打开
        }

        // 条件满足时，执行关闭和业务逻辑
        close();
        console.log('执行提交逻辑');
      },
    });
  };

  return (
    <>
      {contextHolder}
      <button onClick={handleOpenModal}>打开模态框</button>
    </>
  );
};

export default YourComponent;

方法二：手动维护visible状态 #

如果需要更精细的控制，可以自己维护模态框的visible状态，通过修改状态来控制显示/隐藏：

import { useModal, useState, message } from 'antd';

const YourComponent = () => {
  const [modal, contextHolder] = useModal();
  const [modalVisible, setModalVisible] = useState(false);

  const handleOpenModal = () => {
    setModalVisible(true);
    modal.open({
      title: '自定义模态框',
      visible: modalVisible,
      onCancel: () => setModalVisible(false),
      onOk: () => {
        const isDataValid = false; // 你的条件判断

        if (!isDataValid) {
          message.error('验证未通过');
          return; // 不修改visible，保持模态框打开
        }

        setModalVisible(false);
        console.log('执行后续逻辑');
      },
    });
  };

  return (
    <>
      {contextHolder}
      <button onClick={handleOpenModal}>打开模态框</button>
    </>
  );
};

export default YourComponent;

结合表单验证的场景 #

如果模态框内包含Form组件，可以结合表单校验来控制关闭时机：

import { useModal, Form, Input, message } from 'antd';

const YourComponent = () => {
  const [modal, contextHolder] = useModal();
  const [form] = Form.useForm();

  const handleOpenModal = () => {
    modal.confirm({
      title: '提交表单',
      content: (
        <Form form={form} layout="vertical">
          <Form.Item
            name="username"
            label="用户名"
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
            rules={[{ required: true, type: 'email', message: '请输入合法邮箱' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      ),
      onOk: async (close) => {
        try {
          // 执行表单校验
          await form.validateFields();
          // 校验通过，关闭模态框并提交数据
          close();
          console.log('表单数据验证通过，执行提交');
        } catch (error) {
          // 校验失败，模态框保持打开
          message.error('表单填写有误，请检查');
        }
      },
    });
  };

  return (
    <>
      {contextHolder}
      <button onClick={handleOpenModal}>打开表单模态框</button>
    </>
  );
};

export default YourComponent;

核心要点就是：不要依赖框架默认的自动关闭逻辑，而是根据业务条件手动触发关闭操作。

内容的提问来源于stack exchange，提问作者Pytan