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

相关推荐
超凌6 分钟前
threejs 创建了10w条THREE.Line,销毁数据,等待了10秒
前端
车厘小团子24 分钟前
🎨 前端多主题最佳实践:用 Less Map + generate-css 打造自动化主题系统
前端·架构·less
芒果12529 分钟前
SVG图片通过img引入修改颜色
前端
Bug改不动了38 分钟前
React Native 与 UniApp 对比
react native·react.js·uni-app
海云前端141 分钟前
前端面试ai对话聊天通信怎么实现?面试实际经验
前端
一枚前端小能手44 分钟前
🔧 半夜被Bug叫醒的痛苦,错误监控帮你早发现
前端
Juchecar1 小时前
Vue 3 单页应用Router路由跳转示例
前端
这人是玩数学的1 小时前
在 Cursor 中规范化生成 UI 稿实践
前端·ai编程·cursor
UncleKyrie1 小时前
🎨 市面上主流 Figma to Code MCP 对比
前端
南半球与北海道#1 小时前
前端引入vue-super-flow流程图插件
前端·vue.js·流程图