乐趣区

关于前端:Ant-Design-常见用法与坑点总结一

jiezi

前言

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() 等办法应用。

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

退出移动版