react--仿写antd.Form

2022-04-26 本文已影响0人习惯水文的前端苏

$\bullet$ 前言

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

$\bullet$ 分析

通过装饰器语法，我们能拿到待扩展的组件，并可替换类的定义

替换类定义说白了就是在内部返回一个新的类，并且该类的render渲染的是待扩展的组件

$\bullet$ 实现

$\ast$ 实现基础结构

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

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

$\ast$ 收集表单行信息

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

$\ast$ 处理交互

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

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

$\bullet$ 使用示例