Modal的使用
Modal是一个使用频率很高的组件
antd对于Modal提供的方法和属性其实已经很全面了,而日常用法在遇到一些特殊的情况的时候会觉得很麻烦，比如
1、一个组件有多个Modal，因为需要visible来控制是否显示，state里面需要写很多个visible。
2、一个组件里有多个Form,而且Form还放在Modal里面(这也是一个很常见的操作，弹出一个模态框然后填一些数据，然后提交)。
3、Modal里面包含了Table+搜索框等内容。
解决的思路很简单
情况1的话使用Modal.confirm()或者Modal.info()。根据是否需要提交操作选择。
情况2、3写一个新的组件，所有Modal里组件的显示、变化都在当前组件控制。只需要在父组件中调用并传入visible,onOk等参数
具体实现代码
方法一：直接弹出Modal(不需要visible控制，可支持提交、可支持关闭时销毁)
优点：
1、可以直接在方法中调用，不需要用visible控制显示，使用destroy()关闭。
2、可以不通过更新state来更新Modal，使用update()直接更新Modal。
缺点：
1、只有两个按钮，不可设置更多的按钮，适合只需要一个关闭，一个提交的情况。
[Modal.info/success/error/warning只有一个按钮]。
showConfirm = () => {
const modal = Modal.confirm();
modal.update({
title: '标题',
okText: '保存',//默认为确认
cancelText: '关闭',//默认为取消
destroyOnClose: true,
//默认false。默认关闭后状态不会自动清空, 如果希望每次打开都是新内容需要设置true
content: (
<div>
//Modal内其他组件
</div>
),
onOk() {
//调用点击确定时回调的方法
},
onCancel() {
//点击取消/遮罩层的时候回调的方法
modal.destroy();//这是调用Modal.confirm()后返回的引用，可以通过该引用更新和关闭弹窗
},
});
}
方法二：使用Modal+Form实现一个Modal子组件。
优点：不需要设置ref。直接在子组件里控制Form的变化。由于变成了一个单独组件，父组件里不用监控Modal里其他组件的变化。
缺点：没觉得有什么缺点。
class CreatePlan extends Component {
constructor() {
super();
}
onOk = () => {
this.props.form.validateFields((err, values) => {
if (err) return;//检查Form表单填写的数据是否满足rules的要求
this.props.onOk(values);//调用父组件给的onOk方法并传入Form的参数。
})
};
onCancel = () => {
this.props.form.resetFields();//重置Form表单的内容
this.props.onCancel()//调用父组件给的方法
};
render() {
const {getFieldDecorator} = this.props.form;
return (
<Modal
onOk={this.onOk}
onCancel={this.onCancel}
visible={this.props.visible}
title='新增自动升级'
>
<Form>
<FormItem label="升级计划名称">
{getFieldDecorator('planName', {
rules: [{required: true, message: '请填写升级计划名称'}],
})(
<Input/>
)}
</FormItem>
<FormItem label="自动升级时间">
{getFieldDecorator('upgradeTime', {
initialValue: moment(),
rules: [{required: true, message: '请选择自动升级时间'}],
})(
<DatePicker
style={{width: 300}}
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="选择自动升级时间"
/>
)}
</FormItem>
</Form>
</Modal>
)
}
}
export const CreatePlanFormModal = Form.create()(CreatePlan);
//以下父组件里的代码
<CreatePlanModal
visible={this.state.createPlanModalVisible}
onOk={(values) => this.judgeCreatePlan(values)}
onCancel={this.handleCancel}
/>
