react小技巧-多个弹层的调用

import React from "react"
import {Card,Button,Modal} from "antd";
import "./ui.less";

export default class Modals extends React.Component{
    state = {
        showModal1:false,
        showModal2:false,
        showModal3:false,
        showModal4:false,
    }
    showModal = (type)=>{
        this.setState({
            [type]:true             // [type]  重点在这里哦！！！
        })
    }
    handleConfirm = (type)=>{
        Modal[type]({               // [type]  重点在这里哦！！！
            title:"信息确认框",
            content:"自出洞来无敌手，得饶人处且饶人！",
            onOk(){
                console.log('ok')
            }
        })
    }
    render(){
        return (
            <div>
                <Card title="基础模态框">
                    <Button type="primary" onClick={()=>this.showModal('showModal1')}>Open</Button>
                    <Button type="primary" onClick={()=>this.showModal('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={()=>this.showModal('showModal3')}>顶部20px弹框</Button>
                    <Button type="primary" onClick={()=>this.showModal('showModal4')}>水平垂直</Button>
                </Card>
                <Card title="信息确认框">
                    <Button type="primary" onClick={()=>this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={()=>this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={()=>this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={()=>this.handleConfirm('error')}>Error</Button>
                </Card>
                <Modal
                    title="Open"
                    visible={this.state.showModal1}
                    onOk={()=>
                        this.setState({
                            showModal1:false
                        })
                    }
                    onCancel={()=>
                        this.setState({
                            showModal1:false
                        })
                    }
                >
                    <p>自出洞来无敌手，得饶人处且饶人！</p>
                </Modal>
                <Modal
                    title="自定义页脚"
                    visible={this.state.showModal2}
                    onOk={()=>
                        this.setState({
                            showModal2:false
                        })
                    }
                    onCancel={()=>
                        this.setState({
                            showModal2:false
                        })
                    }
                    cancelText = "取消"
                    okText = "确定"
                >
                    <p>自出洞来无敌手，得饶人处且饶人！</p>
                </Modal>
                <Modal
                    title="顶部20px弹框"
                    visible={this.state.showModal3}
                    style={{top:20}}
                    onOk={()=>
                        this.setState({
                            showModal3:false
                        })
                    }
                    onCancel={()=>
                        this.setState({
                            showModal3:false
                        })
                    }
                >
                    <p>自出洞来无敌手，得饶人处且饶人！</p>
                </Modal>
                <Modal
                    title="水平垂直"
                    visible={this.state.showModal4}
                    wrapClassName="vertical-center-modal"
                    onOk={()=>
                        this.setState({
                            showModal4:false
                        })
                    }
                    onCancel={()=>
                        this.setState({
                            showModal4:false
                        })
                    }
                >
                    <p>自出洞来无敌手，得饶人处且饶人！</p>
                </Modal>
            </div>
        )
    }
}