React Antd 4 使用类方法，提交表单时触发验证

注意

如果你还没升级Antd 4，此文不适用。

个人比较习惯用Class component，此文不适用于Form.useForm

步骤

1、在 class component 下，可以通过 ref 获取数据域

2、在提交时，使用validateFields() 或 getFieldsValue()来获取表单值

建立Form的ref

formRef =  React.createRef();

<Form  name="normal_login"
       className="login-form"
       ref={this.formRef}
       >

绑定提交按钮

<Button size="large" className="btn-red" block onClick={()=>this.checkAuth()}>提 交</Button>

提交时触发验证

checkAuth=async()=>{
          
  if (this.formRef && this.formRef.current){ //很重要，在render后，formRef才实例化
       try {
           // 使用 validateFields 获取多个字段值,若验证通过，则返回表单值数组
           const values = await this.formRef.current.validateFields();
           console.log('Validate Success:', values);

           //执行提交数据

         } catch (errorInfo) {
           //若验证失败，返回数组{values:{表单值数组},errorFields:{验证未通过的表单值数组:{errors,name}}}
           console.log('Failed:', errorInfo);
         }

   }
}