大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在
github与好文
前言
antd的form表单为我们内置了大部分能力，日常开发中只需要传指定的参数即可快速完成表单提交，十分神奇。今天闲来无事，就尝试写一个低配版，未参照antd源码，全靠意淫，如有错误，还望海涵…
分析
通过装饰器语法，我们能拿到待扩展的组件，并可替换类的定义。这让对其魔改成为了可能，其实替换类定义说白了就是在内部返回一个新的类，并且该类的render渲染的是待扩展的组件
实现
- 实现基础结构
将validate和getFieldDec传递给原始组件，前者用于校验，后者用于包装表单行
（应该是es6的写法，下文纠正）
- 收集表单行信息
当调用getFieldDec时，相当于要创建一个用户表单行，在此将相关信息收集下来以等待校验，同时将错误的提示ui内置到每一行中
- 处理交互
由于已经通过cloneElement方式为函数绑定了onChange函数，故可以在此做实时的校验处理
最后为外部提供校验接口，调用时再次对每一行校验一次
- 使用示例
如果本文对您有用，希望能得到您的点赞和收藏
订阅专栏，每周更新1-2篇类型体操，每月1-3篇vue3源码解析，等你哟?
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
