react antd modal学习

对象的使用：[] 调用属性

传参：函数调用传参，就是调用函数，而不是一个函数，需要变成函数。

modal的各种属性的使用：

title  visible  onCancel   okText  cancelText   wrapClassName

import React from "react";
import {Card, Button, Modal} from "antd";
import './ui.less'
// × 和 cancel 是同一个事件
export default class Modals extends React.Component {
  state = {
    showModal1: false,
    showModal2: false,
    showModal3: false,
    showModal4: false,
  }
  handleOpen = (type)=>{
    this.setState({
      // type: true 错误 type 是 key，而不是变量
      [type]: true
    })
  }
  handleConfirm = (type)=>{
    // 如果用 if 很烦，哈哈哈哈
    //Modal.confirm = Modal['confirm']
    // var a = {confirm: function (){}}
    Modal[type]({
      title: '确认?',
      content: '地方放反反复复反反复复发反反复复反反复复发',
      onOk(){
        console.log('ok')
      },
      onCancel(){
        console.log('cancel')
      }
    })
  }
  render() {
    return(<div>
      <Card title='基础模态框' className='card-wrap'>
        {/*传参的问题：this.handleOpen，传参需要函数，来调用*/}
        <Button type="primary" onClick={()=>this.handleOpen('showModal1')}>open</Button>
        <Button type="primary" onClick={()=>this.handleOpen('showModal2')}>自定义页脚</Button>
        <Button type="primary" onClick={()=>this.handleOpen('showModal3')}>顶部20px弹框</Button>
        <Button type="primary" onClick={()=>this.handleOpen('showModal4')}>水平垂直居中</Button>
      </Card>
      {/**/}
      <Card title='信息确认模态框' className='card-wrap'>
        {/*传参的问题：this.handleOpen，传参需要函数，来调用*/}
        <Button type="primary" onClick={()=>this.handleConfirm('confirm')}>confirm</Button>
        <Button type="info" onClick={()=>this.handleConfirm('info')}>info</Button>
        <Button type="success" onClick={()=>this.handleConfirm('success')}>success</Button>
        <Button type="warning" onClick={()=>this.handleConfirm('warning')}>warning</Button>
      </Card>
      <Modal title='React' visible={this.state.showModal1} onCancel={()=>{
        this.setState({
          showModal1: false
        })
      }}>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
      </Modal>
      <Modal okText='下一步' cancelText='算了' title='React' visible={this.state.showModal2} onCancel={()=>{
        this.setState({
          showModal2: false
        })
      }}>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
      </Modal>
      {/* 添加自定义样式 */}
      <Modal title='React' visible={this.state.showModal3} style={{top: 10}}  onCancel={()=>{
        this.setState({
          showModal3: false
        })
      }}>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
      </Modal>
      {/*人的眼睛：正前方的偏上方*/}
      <Modal title='水平垂直居中' wrapClassName='vertical-center-modal'  visible={this.state.showModal4}  onCancel={()=>{
        this.setState({
          showModal4: false
        })
      }}>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
        <p>aaaa</p>
      </Modal>
    </div>)
  }
}