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的标题、内容和按钮点击事件等。

相关推荐
一字白首4 小时前
Vue 进阶,Vuex 核心概念 + 项目打包发布配置全解析
前端·javascript·vue.js
栀秋6664 小时前
从前端送花说起:HTML敲击乐与JavaScript代理模式的浪漫邂逅
前端·javascript·css
刘同学有点忙4 小时前
国际化语言包与Excel自动化双向转换方案
前端
bm90dA4 小时前
前端小记:Vue3引入mockjs开发
前端
渔_4 小时前
SCSS 实战指南:从基础到进阶,让 CSS 编写效率翻倍
前端
Syron4 小时前
为什么微应用不需要配置 try_files?
前端
前端老宋Running4 小时前
别再写 API 路由了:Server Actions 才是全栈 React 的终极形态
前端·react.js·架构
王小酱4 小时前
Cursor 的 Debug模式的核心理念和使用流程
前端·cursor
前端老宋Running4 小时前
跟“白屏”说拜拜:用 Next.js 把 React 搬到服务器上,Google 爬虫都要喊一声“真香”
前端·react.js·架构
玉宇夕落4 小时前
深入理解 React 与 JSX:从组件到 UI 构建
前端·react.js