antd-Modal弹窗

在使用react、antd完成信息系统中设计到很多的弹窗：

Modal是antdUI框架中封装好了的对话框，直接引用就好。

            <Modal title="添加信息"
                visible={this.state.visible}   //设置默认隐藏
                onCancel={this.handleCancel}  // 点击取消按钮，对话框消失
                footer={false}   //对话框的底部
            >
            // 一下是在对话框中设置表单
                <Form
                    onSubmit={this.handleSubmit1}
                    className="invitecode">
                    < Form.Item label="小区名称"> {getFieldDecorator('plotName', {
                        rules: [{
                            required: true,
                            message: "输入小区名称"
                        }],
                    })(
                        <Input />)} </Form.Item>
                    < Form.Item label="小区编码"> {getFieldDecorator('plotCode', {
                        rules: [{
                            required: true,
                            message: "请设置小区编码"
                        }],
                    })(
                        <Input />)} </Form.Item>
                    <Form.Item  >
                        <Button type="primary" htmlType="submit"> 添加 </Button>
                    </Form.Item>
                </Form>
            </Modal>

在组件初始化的时候，对话框是消失状态的，在​​constructor​​函数中设置

constructor(){
    super()
    this.state={
            visible: false,
    }
}

当我们点击弹出对话框的时候：在对应的函数中设置visible参数的值为true，

addInfo=()=>{
        this.setState({
            visible: true,
        })
}

//  取消按钮的点击事
handleCancel = () => {
        //点击取消按钮触发的事件
        this.setState({
            visible: false
        });
    }
<Tag color="red" onClick={this.addInfo.bind(this)}>添加信息</Tag>

这样一个简单的弹窗就出来了，谢谢大家的阅览。
谢谢！