Two way binding of form form explored by antdesignpro 4.0

Time:2021-2-15

preface:In Ant Design Pro3.23.6Version, the form form binding value is usedgetFieldDecoratorMethod assignment matchingvalidateFieldsMethod value to achieve the effect of two-way binding4.0How to assign values in the version?

AntDesignPro3.23.6Version example:

//Assignment
 <Form  
    labelCol={{ span: 6 }}
    wrapperCol={{ span: 14 }}
    onSubmit={this.handleSubmit}
  >
    <Form.Item>
      {getFieldDecorator('money',{
          rules=[{ 
              required: true,
              Message: 'please enter the amount',
            }],
      })(
          <InputNumber
            min={0}
            onChange={value => console.log(value) })}
            Placeholder = "please enter amount"
           />
        )}
    </Form.Item>
  </Form>

//Value
handleSubmit () =>{
    this.props.form.validateFields((err, values) => {
          if (!err) {
            //So you get the amount you entered
            const money = values.money
          }
    })
}

AntDesignPro4.0Version example:

//Assignment
 <Form  
    labelCol={{ span: 6 }}
    wrapperCol={{ span: 14 }}
    onSubmit={this.handleSubmit}
  >
    <Form.Item
      Label = "amount"
      name="money"
      rules={[
        {
          required: true,
          Message: 'please enter the amount',
        },
      ]}
    >
      <InputNumber
        min={0}
        onChange={value => console.log(value) })}
        Placeholder = "please enter amount"
       />
    </Form.Item>
  </Form>

//Value
handleSubmit () =>{
  const { validateFields } = form;
  const onValidateForm = async () => {
        const values = await validateFields();
         //So you get the amount you entered
        const money = values.money
  }
}

Conclusion:
3.23.6edition:
Assignment:getFieldDecoratormethod.
Value:validateFieldsmethod.
Check:rulesstaygetFieldDecoratorWithin the method

4.0edition:
Assignment:Form.ItemOfnameProperty is assigned directly
Value:validateFieldsmethod.
Check:Form.ItemOfrulesAttribute direct verification