antd对话框多个嵌套使用如何单独设置onCancel事件

如果要对多个嵌套使用的 Antd 对话框中的某一个对话框单独设置 onCancel 事件可以给该对话框传入一个 onCancel 属性，例如：

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

function MyComponent() {
  const [visible1, setVisible1] = useState(false);
  const [visible2, setVisible2] = useState(false);

  const handleCancel1 = () => {
    // 在这里处理对话框1的取消事件
    setVisible1(false);
  };

  const handleCancel2 = () => {
    // 在这里处理对话框2的取消事件
    setVisible2(false);
  };

  return (
    <>
      <Button onClick={() => setVisible1(true)}>显示对话框1</Button>
      <Modal visible={visible1} onCancel={handleCancel1}>
        <Button onClick={() => setVisible2(true)}>显示对话框2</Button>
        <Modal visible={visible2} onCancel={handleCancel2}>
          对话框2内容
        </Modal>
      </Modal>
    </>
  );
}

在上面的代码中，我们在对话框2中设置了一个单独的 onCancel 事件，当用户点击对话框2的取消按钮时，会触发该事件并执行 handleCancel2 函数。