react+antd的Modal和Form复合使用

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}
/>