React+AntDesign入门：三、AntDesign UI组件-弹出框Modal

三、AntDesign UI组件-弹出框Modal

1.简单的使用下

构想：一个按钮，点击之后弹出一个弹出框，点击取消关闭弹出框。
新增用于展示弹出框的页面UiModal.js

/**
 * AntDesign UI 常用弹出框示例
 */
import React from 'react'
import {Button,Card, Modal} from 'antd'

class UiModal extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      modalAddInfoVisible: false, //新增信息Modal的显示属性
    }
  }

  //弹出一个弹出框用于新增信息
  openModalAddInfo = (type)=>{
    this.setState({modalAddInfoVisible: true})
  }

  render() {
    return(
      

         {/*有参数传递必须加()=>*/}
          this.openModalAddInfo("modalAddInfo")}>新增信息
        

        {/*title:弹出框标题  visible:是否可见  onCancel:取消按钮，右上角X号事件*/}
        {
                 this.setState({modalAddInfoVisible: false})
               }}
        >
          姓名：
        

      
    )
  }

}

export default UiModal;

效果：

2.常用方法汇总

效果：

代码：

/**
 * AntDesign UI 常用弹出框示例
 */
import React from 'react'
import {Button,Card, Modal} from 'antd'
import './ui.less'

class UiModal extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      modalAddInfoVisible: false, //新增信息Modal的显示属性
      modalDivBtnVisible: false, //自定义下面的按钮Modal的显示属性
      modalBottomVisible: false, //靠上展示Modal的显示属性
      modalCenterVisible: false, //水平垂直居中展示Modal的显示属性

    }
  }

  //设置一个弹出框可见,type为传入的变量，用于标识点了哪个按钮
  openModalAddInfo = (type)=>{
    this.setState({[type+"Visible"]: true})
  }

  //弹出一个信息提示框
  showInfo = (type)=>{
    //使用Modal.confirm()弹出一个信息提示框
    Modal.confirm({
      title: '确认？',
      content: '确定提交？',
      onOk(){

      },
      onCancel(){

      }
    })
  }

  render() {
    return(
      


         {/*有参数传递必须加()=>*/}
          this.openModalAddInfo("modalAddInfo")}>新增信息
          this.openModalAddInfo("modalDivBtn")}>自定义下面的按钮
          this.openModalAddInfo("modalBottom")}>靠上展示
          this.openModalAddInfo("modalCenter")}>水平垂直居中展示
        

        {/*title:弹出框标题  visible:是否可见  onCancel:取消按钮，右上角X号事件*/}
        {
                 this.setState({modalAddInfoVisible: false})
               }} >
          姓名：
        

        {/*okText:指定确定按钮的文本  cancelText:指定取消按钮的文本*/}
        {
                 this.setState({modalDivBtnVisible: false})
               }}
               okText="保存"
               cancelText="取消" >
          姓名：
        

        {
                 this.setState({modalBottomVisible: false})
               }} >
          姓名：
        

        {/*wrapClassName:指定自定义样式*/}
        {
                 this.setState({modalCenterVisible: false})
               }} >
          姓名：
        


        
          this.showInfo("info")}>弹出信息框
          this.showInfo("success")}>弹出成功提示框
          this.showInfo("error")}>弹出错误信息框
          this.showInfo("warning")}>弹出警告信息框
          this.showInfo("confirm")}>弹出确认信息框
        
      
    )
  }

}

export default UiModal;

样式代码less.ui：

button{ //所有的button的样式
  margin-right: 10px;
}

/*
 用于指定弹出框Modal的位置的样式
 */
.vertical-center-modal {
  text-align: center;
  white-space: nowrap;
}

.vertical-center-modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.vertical-center-modal .ant-modal {
  display: inline-block;
  vertical-align: middle;
  top: 0;
  text-align: left;
}