一文搞懂antd.Form的最小运行时

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在

github与好文

前言

antd的form表单为我们内置了大部分能力，日常开发中只需要传指定的参数即可快速完成表单提交，十分神奇。今天闲来无事，就尝试写一个低配版，未参照antd源码，全靠意淫，如有错误，还望海涵...

分析

通过装饰器语法，我们能拿到待扩展的组件，并可替换类的定义。这让对其魔改成为了可能，其实替换类定义说白了就是在内部返回一个新的类，并且该类的render渲染的是待扩展的组件

实现

• 实现基础结构

将validate和getFieldDec传递给原始组件，前者用于校验，后者用于包装表单行

（应该是es6的写法，下文纠正）

• 收集表单行信息

当调用getFieldDec时，相当于要创建一个用户表单行，在此将相关信息收集下来以等待校验，同时将错误的提示ui内置到每一行中

• 处理交互

由于已经通过cloneElement方式为函数绑定了onChange函数，故可以在此做实时的校验处理

最后为外部提供校验接口，调用时再次对每一行校验一次

• 使用示例

---

如果本文对您有用，希望能得到您的点赞和收藏

订阅专栏，每周更新1-2篇类型体操，每月1-3篇vue3源码解析，等你哟😎