react+antd的Modal和Form复合使用

2024-06-30 06:03| 来源: 网络整理| 查看: 265

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: ( //Modal内其他组件 ), 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 ( {getFieldDecorator('planName', { rules: [{required: true, message: '请填写升级计划名称'}], })( )} {getFieldDecorator('upgradeTime', { initialValue: moment(), rules: [{required: true, message: '请选择自动升级时间'}], })( )} ) } } export const CreatePlanFormModal = Form.create()(CreatePlan); //以下父组件里的代码 this.judgeCreatePlan(values)} onCancel={this.handleCancel} />

【本文地址】

公司简介

联系我们