AntDesignPro 4.0探索之Form表单的双向绑定

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

AntDesignPro3.23.6版本示例:

// 赋值
 

    
      {getFieldDecorator('money',{
          rules=[{ 
              required: true,
              message: '请输入金额',
            }],
      })(
           console.log(value) })}
            placeholder="请输入金额"
           />
        )}
    
  

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

AntDesignPro4.0版本示例:

// 赋值
 

    
       console.log(value) })}
        placeholder="请输入金额"
       />
    
  

// 取值
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属性直接校验.