mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
43d45330c5
* feat: switch visible to open for Tooltip * feat: switch visible to open for Popover * feat: switch visible to open for Popconfirm * fix * chore: resolve conflict * test: fix test case Co-authored-by: 二货机器人 <smith3816@gmail.com>
1.1 KiB
1.1 KiB
order | title | ||||
---|---|---|---|---|---|
5 |
|
zh-CN
点击确定后异步关闭气泡确认框,例如提交表单。
en-US
Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.
import { Button, Popconfirm } from 'antd';
import React, { useState } from 'react';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const showPopconfirm = () => {
setOpen(true);
};
const handleOk = () => {
setConfirmLoading(true);
setTimeout(() => {
setOpen(false);
setConfirmLoading(false);
}, 2000);
};
const handleCancel = () => {
console.log('Clicked cancel button');
setOpen(false);
};
return (
<Popconfirm
title="Title"
open={open}
onConfirm={handleOk}
okButtonProps={{ loading: confirmLoading }}
onCancel={handleCancel}
>
<Button type="primary" onClick={showPopconfirm}>
Open Popconfirm with async logic
</Button>
</Popconfirm>
);
};
export default App;