foreword
In the project, dialog boxes and confirmation boxes are frequently used components. Here is a record of their basic usage in the react-Ant Design framework.
Basic dialog
First, we need to introduce the components we need to use as needed:
import {
Card, Button, Modal} from 'antd'
Define two buttons that control the popup of the underlying dialog:
<Card title="基础对话框">
<Button type="primary" onClick={
() => this.handleOpen('showModal')}>Open</Button>
<Button type="primary" onClick={
() => this.handleOpen('showModal2')}>Open</Button>
</Card>
Here you need to dynamically set the property value and let showModa be true:
state = {
showModal: false,
showModal2: false
}
handleOpen(type) {
this.setState({
[type]: true // 动态设置属性值
})
}
Finally, write the content of the pop-up box and use Modal to wrap it:
the value of visible controls the display and closing of the pop-up box, and onOk and onCancel are the events triggered by confirmation and cancellation
<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>
Effect:
Information confirmation box
Still the same, the button is triggered and displayed:
control the different color styles of the confirmation box through different parameters in 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>
Event:
Here the above content shares a method by passing the value of type
handleConfirm(type) {
Modal[type]({
title: '确认',
content: '好好学习，天天向上',
onOk() {
console.log('OK')
},
onCancel() {
console.log('no OK')
}
})
}
Effect:
