用法
1. 引入 Modal 组件
import { Modal } from 'antd';
2. 定义组件属性
|参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
|title | 标题 | string 或者 ReactNode 无 |
|visible | 对话框是否可见 | boolean | 无 |
|onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
|onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
state = {
isShowEditModal: false, // 显示Modal
}
handleEditOkClick = () => {
console.log('点击确定');
this.setState ({
isShowEditModal: false,
})
}
handleEditCancelClick = () => {
console.log('点击取消');
this.setState ({
isShowEditModal: false,
})
}
3. 渲染组件
<Modal
title="信息填写"
visible={this.state.isShowEditModal}
onOk={this.handleEditOkClick}
onCancel={this.handleEditCancelClick}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
深入了解
作者简介：李尧晖，芦苇科技web前端开发工程师，代表作品：飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设，专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。
欢迎和我们一起并肩作战： [email protected]
访问 www.talkmoney.cn 了解更多
提供深圳微信公众号制作，高质量的钉钉外包，广东企业微信建设，东莞微信小程序制作，专业的小游戏开发，广州H5建设