antd对话框多个onCancel时如何解决
时间: 2024-02-11 19:06:46 浏览: 35
antd对话框的`onCancel`方法只能有一个,如果你需要在对话框关闭时执行多个操作,可以在`onCancel`方法中调用多个函数来实现。下面是一个示例代码:
```jsx
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
const CustomModal = () => {
const [visible, setVisible] = useState(false);
const handleCancel = () => {
console.log('onCancel 1');
doSomething1(); // 执行操作1
console.log('onCancel 2');
doSomething2(); // 执行操作2
setVisible(false);
};
const handleOpen = () => {
setVisible(true);
};
const doSomething1 = () => {
console.log('doSomething1');
};
const doSomething2 = () => {
console.log('doSomething2');
};
return (
<>
<Button onClick={handleOpen}>Open Modal</Button>
<Modal
visible={visible}
onCancel={handleCancel}
>
<p>Custom Modal Content</p>
</Modal>
</>
);
};
export default CustomModal;
```
在这个示例中,我们在`handleCancel`方法中调用了两个函数`doSomething1`和`doSomething2`,这两个函数分别执行了对话框关闭时需要执行的操作。当用户点击对话框的关闭按钮时,会触发`handleCancel`方法来执行这两个函数并关闭对话框。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)