react-Ant Design框架中基础对话框和信息确认框的使用

前言

在项目中，对话框和确认框是使用频率很高的组件，这里记录一下react-Ant Design框架中它们的基础用法

基础对话框

首先要按需引入我们需要使用到的组件：

import {Card, Button, Modal} from 'antd'

定义两个按钮，控制基础对话框的弹出：

<Card title="基础对话框">
  <Button type="primary" onClick={() => this.handleOpen('showModal')}>Open</Button>
  <Button type="primary" onClick={() => this.handleOpen('showModal2')}>Open</Button>
</Card>

这里就需要动态设置属性值，让showModa为true：

state = {
  showModal: false,
  showModal2: false
}
handleOpen(type) {
  this.setState({
    [type]: true // 动态设置属性值
  })
}

最后再来写弹出框的内容，使用Modal进行包裹：
visible的值控制弹出框的显示和关闭，onOk和onCancel就是确认和取消触发的事件

<Modal
  title="React11111" 
  visible={this.state.showModal} 
  onOk={() => {
    this.setState({showModal: false})
  }} 
  onCancel={() => {
    this.setState({showModal: false})
  }}>
  <p>这里是一些内容...</p>
  <p>这里是一些内容...</p>
  <p>这里是一些内容...</p>
</Modal>

<Modal
  title="React22222" 
  visible={this.state.showModal2} 
  onOk={() => {
    this.setState({showModal2: false})
  }} 
  onCancel={() => {
    this.setState({showModal2: false})
  }}>
  <p>这里是一些内容...</p>
  <p>这里是一些内容...</p>
  <p>这里是一些内容...</p>
</Modal>

效果：

信息确认框

还是先一样的，按钮进行触发显示：
在this.handleConfirm中通过不同的参数控制确认框不同的颜色样式

<Card title="信息确认">
  <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Open</Button>
  <Button type="info" onClick={() => this.handleConfirm('info')}>Open</Button>
  <Button type="success" onClick={() => this.handleConfirm('success')}>Open</Button>
  <Button type="warning" onClick={() => this.handleConfirm('warning')}>Open</Button>
</Card>

事件：
这里通过type传值让上面的内容共用一个方法

handleConfirm(type) {
  Modal[type]({
    title: '确认',
    content: '好好学习，天天向上',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('no OK')
    }
  })
}

效果：