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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29668759/article/details/88746257

三、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(
      <div>
        <Card title="弹出新增信息页面"> {/*有参数传递必须加()=>*/}
          <Button type="primary" onClick={()=>this.openModalAddInfo("modalAddInfo")}>新增信息</Button>
        </Card>

        {/*title:弹出框标题  visible:是否可见  onCancel:取消按钮，右上角X号事件*/}
        <Modal title="新增信息"
               visible={this.state.modalAddInfoVisible}
               onCancel={()=>{
                 this.setState({modalAddInfoVisible: false})
               }}
        >
          <span>姓名：</span><input/>
        </Modal>

      </div>
    )
  }

}

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(
      <div>

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

        {/*title:弹出框标题  visible:是否可见  onCancel:取消按钮，右上角X号事件*/}
        <Modal title="新增信息Modal"
               visible={this.state.modalAddInfoVisible}
               onCancel={()=>{
                 this.setState({modalAddInfoVisible: false})
               }} >
          <span>姓名：</span><input/>
        </Modal>

        {/*okText:指定确定按钮的文本  cancelText:指定取消按钮的文本*/}
        <Modal title="自定义下面的按钮Modal"
               visible={this.state.modalDivBtnVisible}
               onCancel={()=>{
                 this.setState({modalDivBtnVisible: false})
               }}
               okText="保存"
               cancelText="取消" >
          <span>姓名：</span><input/>
        </Modal>

        <Modal title="靠上展示Modal"
               style={{top:20}} //需要在ui.less中添加相关样式
               visible={this.state.modalBottomVisible}
               onCancel={()=>{
                 this.setState({modalBottomVisible: false})
               }} >
          <span>姓名：</span><input/>
        </Modal>

        {/*wrapClassName:指定自定义样式*/}
        <Modal title="水平垂直居中展示Modal"
               visible={this.state.modalCenterVisible}
               wrapClassName="vertical-center-modal"
               onCancel={()=>{
                 this.setState({modalCenterVisible: false})
               }} >
          <span>姓名：</span><input/>
        </Modal>


        <Card title="弹出信息提示框">
          <Button type="primary" onClick={()=>this.showInfo("info")}>弹出信息框</Button>
          <Button type="primary" onClick={()=>this.showInfo("success")}>弹出成功提示框</Button>
          <Button type="primary" onClick={()=>this.showInfo("error")}>弹出错误信息框</Button>
          <Button type="primary" onClick={()=>this.showInfo("warning")}>弹出警告信息框</Button>
          <Button type="primary" onClick={()=>this.showInfo("confirm")}>弹出确认信息框</Button>
        </Card>
      </div>
    )
  }

}

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;
}