关于前端: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.Item    name="mobile"    label="手机号码或座机"    rules={[        { required: true, message: "请输出手机号码或座机号码" },        { pattern: /......../, message: "请输出正确的手机号或座机号" }    ]}>        <Input placeholder="请输出手机号或座机号" /></Form.Item>

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

自定义表单校验规定灵便度更高，能够针对一些非凡场景、非凡规定进行设置。日常工作应用概率比拟大。

形式一：对象写法

<Form.Item    name="mobile"    label="手机号"    rules={[        {             // rule 参数是 Form.Item 的校验规定 rules            validator: (rule, value) => {                if(!value) {                    return Promise.reject(new Error("请输出手机号"));                }                if(value.length > 11) {                    return Promise.reject(new Error("手机号不超过11位"));                }                return Promise.resolve();            }        },    ]}>        <Input placeholder="请输出手机号" /></Form.Item>

形式二：函数写法

<Form.Item    name="password"    label="账户明码"    rules={[        ({ getFieldValue }) => ({            validator(_, value) {                if(!value) {                    return Promise.reject(new Error("请输出账户明码"));                }                if(value === getFieldValue("password")) {                    console.log("getFieldValue() 办法获取对应字段名的值");                }                return Promise.resolve();            }        })    ]}>        <Input placeholder="请输出你的账户明码" /></Form.Item>

相比而言，形式二的自由度更高，性能也绝对更弱小，因为提供了 getFieldValue() 等办法应用。

但集体认为，形式一的写法更加优雅，并且个别状况下，形式一也足够应用了，能够解决日常工作大部分自定义表单验证规定的场景。