关于前端: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属性间接校验.