ant-design/components/modal/demo/confirm.md

103 lines
2.3 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 3
2016-10-07 18:00:48 +08:00
title:
2016-08-11 11:41:06 +08:00
zh-CN: 确认对话框
en-US: Confirmation modal dialog
2016-03-31 09:40:55 +08:00
---
2015-06-12 19:41:30 +08:00
2016-08-11 11:41:06 +08:00
## zh-CN
2020-05-29 13:39:24 +08:00
使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭。
2015-06-12 19:41:30 +08:00
2016-08-11 11:41:06 +08:00
## en-US
2020-05-29 13:39:24 +08:00
Use `confirm()` to show a confirmation modal dialog. Let onCancel/onOk function return a promise object to delay closing the dialog.
2016-08-11 11:41:06 +08:00
```tsx
import { ExclamationCircleFilled } from '@ant-design/icons';
2022-05-21 22:14:15 +08:00
import { Button, Modal, Space } from 'antd';
import React from 'react';
2018-06-27 15:55:04 +08:00
2019-06-19 19:09:08 +08:00
const { confirm } = Modal;
2015-06-12 19:41:30 +08:00
const showConfirm = () => {
2015-06-12 19:41:30 +08:00
confirm({
title: 'Do you Want to delete these items?',
icon: <ExclamationCircleFilled />,
content: 'Some descriptions',
onOk() {
2016-08-11 11:41:06 +08:00
console.log('OK');
2015-06-12 19:41:30 +08:00
},
onCancel() {
console.log('Cancel');
2017-07-17 10:01:23 +08:00
},
2017-07-16 17:44:52 +08:00
});
};
2017-07-16 17:44:52 +08:00
const showPromiseConfirm = () => {
2020-05-29 13:39:24 +08:00
confirm({
title: 'Do you want to delete these items?',
icon: <ExclamationCircleFilled />,
2020-05-29 13:39:24 +08:00
content: 'When clicked the OK button, this dialog will be closed after 1 second',
onOk() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel() {},
});
};
2020-05-29 13:39:24 +08:00
const showDeleteConfirm = () => {
2017-07-16 17:44:52 +08:00
confirm({
title: 'Are you sure delete this task?',
icon: <ExclamationCircleFilled />,
2017-07-16 17:44:52 +08:00
content: 'Some descriptions',
okText: 'Yes',
okType: 'danger',
cancelText: 'No',
onOk() {
console.log('OK');
},
2017-07-16 17:44:52 +08:00
onCancel() {
console.log('Cancel');
2017-07-17 10:01:23 +08:00
},
2015-06-12 19:41:30 +08:00
});
};
2015-06-12 19:41:30 +08:00
const showPropsConfirm = () => {
confirm({
title: 'Are you sure delete this task?',
icon: <ExclamationCircleFilled />,
content: 'Some descriptions',
okText: 'Yes',
okType: 'danger',
okButtonProps: {
disabled: true,
},
cancelText: 'No',
onOk() {
console.log('OK');
},
onCancel() {
console.log('Cancel');
},
});
};
const App: React.FC = () => (
2021-09-13 19:27:31 +08:00
<Space wrap>
2019-05-07 14:57:32 +08:00
<Button onClick={showConfirm}>Confirm</Button>
2020-05-29 13:39:24 +08:00
<Button onClick={showPromiseConfirm}>With promise</Button>
2017-07-16 17:44:52 +08:00
<Button onClick={showDeleteConfirm} type="dashed">
Delete
</Button>
<Button onClick={showPropsConfirm} type="dashed">
With extra props
</Button>
</Space>
2018-11-28 15:00:03 +08:00
);
export default App;
2019-05-07 14:57:32 +08:00
```