Modal对话框（antd-design组件库）简单使用

太过爱你忘了你带给我的痛 2023-10-12 21:09 29阅读 0赞

## **1.****Modal对话框** ##

模态对话框。

## **2.****何时使用** ##

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。

另外当需要一个简洁的确认框询问用户时，可以使用 App.useApp 封装的语法糖方法。

组件代码来自： [对话框 Modal - Ant Design][Modal - Ant Design]

## **3.****本地验证前的准备** ##

参考文章【react项目+antd组件-demo:hello-world [react项目+antd组件-demo:hello-world\_西晋的no1的博客-CSDN博客][react_antd_-demo_hello-world_no1_-CSDN]】，将 [对话框 Modal - Ant Design][Modal - Ant Design] 中需要在本地使用的代码复制覆盖**App2.js**中的全部代码，启动代码，可在本地查看现象和更改代码。

## **4.****本地验证Modal的基本用法。** ##

复制下图所示代码，了解Modal的基本用法。

![323384da04204a2fb001c318ad7f2450.png][]

## **5.****自定义页脚不需要默认确定取消按钮时，你可以把 footer 设为 null。** ##

**在上一步的基础上，加上footer=\{null\}**

**最终****App2.js**中的全部代码如下：

import { Button, Modal } from 'antd';
    import { useState } from 'react';
    const App = () => {
          const [isModalOpen, setIsModalOpen] = useState(false);
          const showModal = () => {
                setIsModalOpen(true);
          };
          const handleOk = () => {
                setIsModalOpen(false);
          };
          const handleCancel = () => {
                setIsModalOpen(false);
          };
          return (
              <>
                    <Button type="primary" onClick={showModal}>
                        Open Modal
                    </Button>
                  <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
                      <p>Some contents...</p>
                      <p>Some contents...</p>
                      <p>Some contents...</p>
                  </Modal>
              </>
          );
    };
    export default App;

效果图如下：

无footer=\{null\}

![03c8b0ef93c74b84b39331e39de3f26a.png][]

有footer=\{null\}

![c095ec771ce24707ad73be4e4ed12c51.png][]

本文仅介绍了组件Modal的部分内容，更多内容请参阅官方文档： [对话框 Modal - Ant Design][Modal - Ant Design]

[Modal - Ant Design]: https://ant.design/components/modal-cn
[react_antd_-demo_hello-world_no1_-CSDN]: https://blog.csdn.net/xijinno1/article/details/130979732
[323384da04204a2fb001c318ad7f2450.png]: https://img-blog.csdnimg.cn/323384da04204a2fb001c318ad7f2450.png
[03c8b0ef93c74b84b39331e39de3f26a.png]: https://img-blog.csdnimg.cn/03c8b0ef93c74b84b39331e39de3f26a.png
[c095ec771ce24707ad73be4e4ed12c51.png]: https://img-blog.csdnimg.cn/c095ec771ce24707ad73be4e4ed12c51.png