Ant Design 组件 —— Modal

用法

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>

深入了解

• Ant Design - Modal对话框

作者简介：李尧晖，芦苇科技web前端开发工程师，代表作品：飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和我们一起并肩作战： web@talkmoney.cn

访问 www.talkmoney.cn 了解更多

芦苇科技-广州专业软件外包服务公司

提供微信小程序、APP应用研发、UI设计等专业服务，专注于互联网产品咨询、品牌设计、技术研发等领域

万能说明书 | 早起日记Lite | 凹凸壁纸 | 言财