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 分钟前
pdf转TXT文本,适用于文字型PDF;扫描版PDF需要使用OCR(光学字符识别)技术来识别图中的文字
java·服务器·前端
ZC跨境爬虫7 分钟前
跟着 MDN 学 HTML day_43:(DocumentFragment 接口详解)
前端·javascript·vue.js·ui·html·音视频
Bigger19 分钟前
mini-cc:用最小的代码,复刻一个“真正能干活”的 AI 编程智能体(并且把架构讲清楚)
前端·ai编程·claude
问心无愧051322 分钟前
ctf show web 入门46
android·前端·笔记
ooseabiscuit26 分钟前
PHP与C++:Web与系统编程的终极对决
前端·c++·php
SEO_juper26 分钟前
外贸独立站流量翻倍后的转化优化
大数据·前端·seo·geo·外贸独立站·谷歌优化·2026
i学长的猫31 分钟前
# Hermes + Web UI 本地 Docker 部署指南
前端·ui·docker
yanyu-yaya33 分钟前
css篇之网格grid 学习
前端·css·学习
MandalaO_O33 分钟前
Web 开发:计算机网络知识梳理
前端·网络·计算机网络
lyp90h34 分钟前
Claude Code CLI System Prompt 完整分析
java·前端·prompt