2024年4月12日发(作者：)

antdesign confirmloading 的用法

Ant Design ConfirmLoading的用法

Ant Design是一套企业级的UI设计语言和React组件库，拥有丰富

的组件和样式，可以帮助开发人员快速搭建现代化的Web应用。其中

的ConfirmLoading是Ant Design中的一个常用组件，用于在执行某个

操作时，为用户提供一个加载中的提示，以改善用户体验。

一、ConfirmLoading的作用

ConfirmLoading是Ant Design中Modal组件的一个属性，用于指定

在Modal弹窗中执行某个操作时是否需要显示加载中的提示。通过设

置该属性，开发人员可以在需要执行耗时操作时，展示一个加载中的

效果，以避免用户误操作或者产生不必要的等待焦虑。

二、ConfirmLoading的用法

1. 引入Ant Design库

首先，确保项目中已经引入了Ant Design库。可以通过NPM或者

Yarn安装Ant Design，并在项目的入口文件中引入相关样式。

2. 使用Modal组件

ConfirmLoading是Modal组件的一个属性，因此，在使用

ConfirmLoading之前，需要先引入并使用Modal组件。在需要使用

ConfirmLoading的页面中，引入Modal组件，并初始化一个Modal弹

窗。

3. 设置ConfirmLoading属性

在Modal组件中，可以设置ConfirmLoading属性来控制是否显示加

载中的提示。ConfirmLoading属性接受一个布尔值，当其为true时，

表示需要显示加载中的提示；当其为false时，表示不需要显示加载中

的提示。

4. 执行耗时操作

接下来，我们需要在Modal弹窗中执行某个耗时操作，例如发送一

个异步请求。在该操作开始前，将ConfirmLoading属性设置为true，

以显示加载中的提示。

5. 关闭Modal弹窗并隐藏加载提示

当耗时操作执行完毕后，需要关闭Modal弹窗，并将

ConfirmLoading属性设置为false，以隐藏加载中的提示。

三、示例代码

下面是一个使用Ant Design ConfirmLoading的示例代码：

```jsx

import React, { useState } from 'react';

import { Modal, Button } from 'antd';

const MyComponent = () => {

const [visible, setVisible] = useState(false);

const [confirmLoading, setConfirmLoading] = useState(false);

const showModal = () => {

setVisible(true);

};

const handleOk = () => {

setConfirmLoading(true);

// 模拟发送异步请求

setTimeout(() => {

setVisible(false);

setConfirmLoading(false);

}, 2000);

};

const handleCancel = () => {

setVisible(false);

};

return (

<>

title="确认操作"

visible={visible}

confirmLoading={confirmLoading}

onOk={handleOk}

onCancel={handleCancel}

>

确定执行此操作吗？

);

};

export default MyComponent;

```

四、总结

Ant Design ConfirmLoading是一个用于在执行耗时操作时显示加载

中提示的组件。通过设置ConfirmLoading属性为true，可以在Modal

弹窗中展示加载中的效果，给用户一个良好的操作体验。在耗时操作

执行完毕后，将ConfirmLoading属性设置为false，即可隐藏加载提示。

通过以上的步骤，我们可以轻松地在使用Ant Design中的Modal组

件时，使用ConfirmLoading属性来实现加载中的效果，从而提升用户

体验。