Ant Design 常见用法与坑点总结（一）

前言

Ant Design 是蚂蚁出品的出色优秀的 React 组件库，相信使用 React 进行管理系统开发的小伙伴们或多或少都接触过 Ant Design。很多公司基于 React 开发的管理端系统也都是使用 Ant Design 的组件库。

因此，了解 Ant Design 的常见用法与坑点还是有必要的。

本系列文章针对 Ant Design 一些官方文档虽有提及，但是容易被忽略的，又比较重要常见的用法进行总结。同时对工作使用过程当中遇到的坑点进行归纳。

tip：文章使用的 4.x 版本的 Ant Design。

Form 触发表单验证

Form.Item 的 rules 表单验证规则，需要调用 validateFields() 方法触发表单验证才能真正阻止不符合规则的表单的提交。

如果仅仅定义了 rules 规则，而没有调用 validateFields() 方法进行验证，即使表单没通过校验，依然可以提交。、

const handleSubmit = async () => {
    // 触发表单验证，注意该方法是异步的
    await form.validateFields();
    submitForm();
}


        

Form 表单自定义校验规则的两种写法

自定义表单校验规则灵活度更高，可以针对一些特殊场景、特殊规则进行设置。日常工作使用概率比较大。

方式一：对象写法

 {
                if(!value) {
                    return Promise.reject(new Error("请输入手机号"));
                }
                if(value.length > 11) {
                    return Promise.reject(new Error("手机号不超过11位"));
                }
                return Promise.resolve();
            }
        },
    ]}
>
        

方式二：函数写法

 ({
            validator(_, value) {
                if(!value) {
                    return Promise.reject(new Error("请输入账户密码"));
                }
                if(value === getFieldValue("password")) {
                    console.log("getFieldValue() 方法获取对应字段名的值");
                }
                return Promise.resolve();
            }
        })
    ]}
>
        

相比而言，方式二的自由度更高，功能也相对更强大，因为提供了 getFieldValue() 等方法使用。

但个人认为，方式一的写法更加优雅，并且一般情况下，方式一也足够使用了，可以解决日常工作大部分自定义表单验证规则的场景。