ant.design form表单提交+表单赋值

场景：index.js上有三个form表单组件分别是，A.js  B.js  C.js

点击index.js上的提交/保存按钮，提交子组件form表单的值

 1.在index父组件上使用create创建form

const { form } = this.props;
const { getFieldDecorator } = this.props.form;
Form.create()(BilltoMaintenanceDetail);

 

2.把form和getFieldDecorator 当做参数传递给子组件，A.js/B.js/C.js

<A
    getFieldDecorator={getFieldDecorator}
    form={form} />

3.子组件接受到之后,就可以使用表单的form相关方法了，此时已经和index创建的form关联起来了

const {form,getFieldDecorator} = this.props;
<Form>
  <Form.Item label="合同分类">
    {getFieldDecorator('Con_Cate',{
        rules: [{required: true, message: '采购备注'}],
    })( 
        <Input placeholder={PL} disabled />
    )}
</Form.Item>
</form>

4.直接在父组件index.js提交就能获取到子组件表单的值

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }

表单赋值回显

在index.js父组件 调用setFieldsValue,这里需要注意 setFieldsValue方法里面是个对象，以key:value的形式赋值,在这里可以直接给子组件里面的某一个表单元素赋值，代码如下

this.props.form.setFieldsValue({
    Con_Cate:xxxx
})

结束