如何使用Ant Design Popconfirm确认关闭Modal后自动关闭弹窗？

问题根源：你将Popconfirm放在Modal内部，点击Yes确认关闭Modal时，Modal会卸载内部的Popconfirm组件，但Popconfirm的弹窗默认挂载在body上，组件卸载后无法触发弹窗关闭逻辑，导致弹窗残留。以下是两种可行的解决方法：

方法一：自定义Modal关闭按钮（推荐） #

直接用Popconfirm包裹Modal的关闭触发元素，利用组件默认逻辑自动管理弹窗状态，无需额外维护popupOpen：

import { Modal, Popconfirm, Button } from 'antd';
import { useState } from 'react';
import { CloseOutlined } from '@ant-design/icons';

export const Ensayo=()=> {
  const [open, setOpen] = useState(false);

  const showModal = () => {
    setOpen(true);
  };

  const handleConfirmClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={showModal}>
        Open Modal
      </button>
      <Modal
        title={
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            Basic Modal
            {/* 自定义右上角关闭按钮 */}
            <Popconfirm
              title="Are you sure you want to close this modal?"
              onConfirm={handleConfirmClose}
              okText="Yes"
              cancelText="No"
            >
              <CloseOutlined style={{ cursor: 'pointer', fontSize: 16 }} />
            </Popconfirm>
          </div>
        }
        open={open}
        closable={false} // 关闭默认关闭按钮
        footer={[
          {/* 底部关闭按钮 */}
          <Popconfirm
            title="Are you sure you want to close this modal?"
            onConfirm={handleConfirmClose}
            okText="Yes"
            cancelText="No"
            key="close"
          >
            <Button>Close</Button>
          </Popconfirm>
        ]}
      >
        <p>Some contents...</p>
      </Modal>
    </div>
  );
}

方法二：将Popconfirm移到Modal外部 #

保留原有的状态控制逻辑，把Popconfirm放在Modal外部，确保Modal关闭时组件不会被卸载，从而能正确关闭弹窗：

import { Modal, Popconfirm } from 'antd';
import { useState } from 'react';

export const Ensayo=()=> {
  const [open, setOpen] = useState(false);
  const [popupOpen, setPopupOpen] = useState(false);

  const showModal = () => {
    setOpen(true);
  };

  const handleCancel = () => {
    setPopupOpen(true);
  };

  const handlePopupConfirm = () => {
    // 先关闭Popconfirm弹窗
    setPopupOpen(false);
    // 延迟关闭Modal，确保弹窗关闭逻辑执行完成
    setTimeout(() => {
      setOpen(false);
    }, 0);
  };

  const handlePopupCancel = () => {
    setPopupOpen(false);
  };

  return (
    <div>
      <button type="button" onClick={showModal}>
        Open Modal
      </button>
      <Modal
        title="Basic Modal"
        open={open}
        onCancel={handleCancel}
      >
        <p>Some contents...</p>
      </Modal>
      {/* Popconfirm移至Modal外部 */}
      <Popconfirm
        title="Are you sure you want to close this modal?"
        open={popupOpen}
        onConfirm={handlePopupConfirm}
        onCancel={handlePopupCancel}
        okText="Yes"
        cancelText="No"
        placement="top"
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者juan pablo velez rojas