关于前端:AntDesignPro-40探索之Form表单的双向绑定

前言:在 AntDesignPro3.23.6版本中,form 表单绑定值是应用的 getFieldDecorator 办法赋值配合 validateFields 办法取值达到双向绑定的成果. 那在 AntDesignPro 4.0版本中如何赋值取值呢?

AntDesignPro3.23.6版本示例:

// 赋值
 <Form  
    labelCol={{span: 6}}
    wrapperCol={{span: 14}}
    onSubmit={this.handleSubmit}
  >
    <Form.Item>
      {getFieldDecorator('money',{
          rules=[{ 
              required: true,
              message: '请输出金额',
            }],
      })(
          <InputNumber
            min={0}
            onChange={value => console.log(value) })}
            placeholder="请输出金额"
           />
        )}
    </Form.Item>
  </Form>

// 取值
handleSubmit () =>{this.props.form.validateFields((err, values) => {if (!err) {
            // 这样就拿到了输出的金额
            const money = values.money
          }
    })
}

AntDesignPro4.0版本示例:

// 赋值
 <Form  
    labelCol={{span: 6}}
    wrapperCol={{span: 14}}
    onSubmit={this.handleSubmit}
  >
    <Form.Item
      label="金额"
      name="money"
      rules={[
        {
          required: true,
          message: '请输出金额',
        },
      ]}
    >
      <InputNumber
        min={0}
        onChange={value => console.log(value) })}
        placeholder="请输出金额"
       />
    </Form.Item>
  </Form>

// 取值
handleSubmit () =>{const { validateFields} = form;
  const onValidateForm = async () => {const values = await validateFields();
         // 这样就拿到了输出的金额
        const money = values.money
  }
}

总结:
3.23.6版本:
赋值:getFieldDecorator办法.
取值:validateFields办法.
校验:rules在 getFieldDecorator 办法内.

4.0版本:
赋值:Form.Item的 name 属性间接赋值.
取值:validateFields办法.
校验:Form.Item的 rules 属性间接校验.