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

相关推荐
无风听海1 分钟前
JSON Web Token(JWT)完全指南
java·前端·json
IT_陈寒40 分钟前
Python闭包里藏的这个坑,差点让我加班到凌晨
前端·人工智能·后端
IT_陈寒40 分钟前
Java注解空指针?这个坑我踩得莫名其妙
前端·人工智能·后端
H0r1zon.1 小时前
PinCopy:双击 Ctrl,把剪贴板「钉」在屏幕上
前端
kyriewen1 小时前
大厂面试新规:不会用AI编程,直接挂
前端·面试·ai编程
努力找实习的前端小白1 小时前
useImperativeHandle,useRef,forwardRef的协作关系
前端·面试
ZengLiangYi1 小时前
React Query + REST API 最佳实践
javascript·后端·react.js
ZengLiangYi2 小时前
Fastify 加 Electron:把 Web 服务嵌进桌面应用
前端·javascript·后端
qq_2518364572 小时前
基于nodejs express +vue 天天商城系统设计与实现 (源码 文档)
前端·vue.js·express
胡萝卜术2 小时前
从零搭建生成式AI项目:OpenAI + Node.js 环境配置与密钥安全实践
前端·javascript·面试