react+Antd 表单清空的坑和排错填坑

翻遍了整个度娘硬是找不到靠谱的解决方法，自行解决后分享一下。

页面效果：

 

开发登录校验界面的整体代码，因为主打后端，所以基本结构有点混乱，有不足之处还望指点。

目录

登录表单页面的完整代码：login.js

一段段逻辑讲一下

下面是排错参考文章和一些资料：

---

登录表单页面的完整代码：login.js

import React,{Component} from 'react';
import { Button, Checkbox, Form, Input } from 'antd';

class LoginTo extends Component {

    FormRef = React.createRef();
    // namepaths = ['username','password'];

    onFinish = (values) => {
        console.log('Success:', values);
    };

    onFinishFailed = (errorInfo) => {
      this.FormRef.current.resetFields();
      console.log('Failed:', errorInfo);
    };

    //校验不通过清空表单输入框中的输入内容
    handleSubmit = () => {
        console.log(this);
        this.FormRef.current.resetFields();
    }

    render(){
        return (
            <Form
            ref={this.FormRef}
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              //设置初始化值
              initialValues={{
                'username': '',
                'password': ''，
                'remember': true
              }}
              onFinish={this.onFinish}
              onFinishFailed={this.onFinishFailed}
              autoComplete="off"
              //设置整个<Form>元素的位置
              style={{
                width: 1200,
                border: 75,
                padding: 34,
                margin: 200
              }}
            >
              <Form.Item
                label="Username"
                name="username"
                //设置校验规则
                rules={[
                    {required: true, message: 'Please input your username!'},
                    {pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/, message: '不支持特殊字符或空格!'},
                    { max: 20, message: '用户名最长不超过20位,请正确输入' }
                ]}
              >
                <Input placeholder='please input your username.' style={{width: 250, height: 40}}/>
              </Form.Item>
        
              <Form.Item
                label="Password"
                name="password"
                //设置校验规则,一旦匹配不上立即报错
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                  {pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/, message: '不支持特殊字符或空格!'}
                ]}
              >
                <Input.Password placeholder='please input your password.' style={{width: 250, height: 40}}/>
              </Form.Item>
        
              <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Checkbox>Remember me</Checkbox>
              </Form.Item>
        
              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16,
                }}
              >
                <Button type="primary" htmlType="submit" onClick={this.handleSubmit}>
                  Submit
                </Button>
              </Form.Item>
            </Form>
          );
    };
}

export default LoginTo;

一段段逻辑讲一下

首先是设置校验规则，设置在Form.Item组件的rules属性,类型是Rules[]数组。校验时机由Form.Item组件中的validataFirst属性设置，不设置默认表单值改变时触发，校验规则就是rules属性。

pattern定义正则表达式，msg为错误提示信息。

              //用正则表达式进行匹配字段值来校验判定，不符合提示msg中的自定义信息
              //username的校验
              <Form.Item
                label="Username"
                name="username"
                //设置校验规则
                rules={[
                    {required: true, message: 'Please input your username!'},
                    {pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/, message: '不支持特殊字符或空格!'},
                    { max: 20, message: '用户名最长不超过20位,请正确输入' }
                ]}
              >
                <Input placeholder='please input your username.' style={{width: 250, height: 40}}/>
              </Form.Item>

              //password的校验
              <Form.Item
                label="Password"
                name="password"
                //设置校验规则,一旦匹配不上立即报错
                rules={[
                  {
                    required: true,
                    message: 'Please input your password!',
                  },
                  {pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/, message: '不支持特殊字符或空格!'}
                ]}
              >
                <Input.Password placeholder='please input your password.' style={{width: 250, height: 40}}/>
              </Form.Item>

然后是输入框的默认显示palceholder属性，显示效果是虚化的字体提示。同样见以上代码。

接着就是bug的罪恶来源了。。先说说需求：

提交表单校验失败后清空表单项。

查看antd的官方文档，找到有可以直接使用的方法

 配合Form组件的initialValues属性使用：

            <Form
            ref={this.FormRef}
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              //设置初始化值
              initialValues={{
                'username': '',
                'password': '',
                'remember': true //设置remember me功能，默认勾选。
              }}
              onFinish={this.onFinish}
              onFinishFailed={this.onFinishFailed}
              autoComplete="off"
              //设置整个<Form>元素的位置
              style={{
                width: 1200,
                border: 75,
                padding: 34,
                margin: 200
              }}
            >

需要注意的是Form组件中的initialValues属性和Form.Item子组件中的initialValue属性会有冲突，不能一同设置，会报错Warning: Form already set 'initialValues' with path 'xxx'. Field can not overwrite it. 警告，因为initialValue 和 initialValues 不推荐共用的。

然后是设置提交后校验失败回滚表单项的功能。这里触发事件放在button组件的onClick属性上。而resetFields方法无法在组件中调用，需要抽取出来，代码如下：

//button组件
 <Form.Item
   wrapperCol={{
    offset: 8,
    span: 16,
    }}
   >
 <Button type="primary" htmlType="submit" onClick={this.handleSubmit}>
   Submit
 </Button>
 </Form.Item>

 //handleSubmit方法
 //校验不通过清空表单输入框中的输入内容
 handleSubmit = () => {
    console.log(this);
    this.FormRef.current.resetFields();
 }

这里handleSubmit方法中用到了FormRef，那么肯定在上文是有设置的。

 FormRef = React.createRef();

这样完整的登录校验表单页面就能够实现了。

---

下面是排错参考文章和一些资料：

学到不错的的排错方法 

关于initialValues使用：antd的Form组件实例 表单 Form - Ant Design (antgroup.com)