前言
在项目中，对话框和确认框是使用频率很高的组件，这里记录一下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')
}
})
}
效果：
