react ant design 通过函数弹出 modal窗口

React Ant Design中,可以通过调用Modal组件的方法来动态弹出和关闭Modal窗口。具体步骤如下:

1、首先,在组件中引入Modal组件:

javascript 复制代码
import { Modal } from 'antd';

2、在组件中定义一个函数来弹出Modal窗口:

javascript 复制代码
const showModal = () => {
    Modal.info({
        title: 'This is a modal window',
        content: (
            <div>
                <p>Content of the modal</p>
            </div>
        ),
        onOk() {},
    });
};

3、在需要触发弹出Modal窗口的事件中调用showModal函数,比如一个按钮的点击事件:
<Button onClick={showModal}>Open Modal</Button>

通过以上步骤,当按钮被点击时,会弹出一个Modal窗口显示指定的内容。在Modal.info方法中,可以根据需求设置Modal的标题、内容和按钮点击事件等。

相关推荐
忧郁的蛋~10 分钟前
小程序页面传值的多种方式
前端·小程序
liuyang___24 分钟前
分享一下这几天在公司学到的东西
前端
rocky19126 分钟前
谷歌浏览器插件 录制菜单路由跳转行为 事件重复解决方案
前端·javascript
佳腾_29 分钟前
【web服务_负载均衡Nginx】一、Nginx 基础与核心概念解析
前端·nginx·负载均衡
风中飘爻35 分钟前
MySQL入门:数据操作CURD
前端·bootstrap·html
rocky19143 分钟前
谷歌浏览器插件 录制元素拖动事件
前端·javascript
nothingbutluck4641 小时前
2025.4.10 html有序、无序、定义列表、音视频标签
前端·html·音视频
爱上python的猴子2 小时前
chrome中的copy xpath 与copy full xpath的区别
前端·chrome
Lysun0012 小时前
dispaly: inline-flex 和 display: flex 的区别
前端·javascript·css
Moon里3 小时前
【React】什么是 Hook
react.js