美文网首页
react--仿写antd.Form

react--仿写antd.Form

作者: 习惯水文的前端苏 | 来源:发表于2022-04-26 14:43 被阅读0次

\bullet 前言

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

\bullet 分析

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

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

\bullet 实现

    \ast 实现基础结构

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

(应该是es6的写法,下文纠正)

    \ast 收集表单行信息

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

    \ast 处理交互

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

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

\bullet 使用示例

相关文章

  • react--仿写antd.Form

    前言 antd的form表单为我们内置了大部分能力,日常开发中只需要传指的参数即可快速完成提交,十分神奇。今天...

  • 仿写JQ方法

    原生js仿写jq 仿写jq的click方法 仿写jq的on事件 仿写jq的eq方法 仿写jq的 css方法 仿写j...

  • Ant-design踩坑

    Antd.Form 踩坑 经过getFieldDecorator的注册后,所以的onChange函数会被接管。本身...

  • 仿写练笔 仿写!!!

    先生独自一个,带了些钱,步出门,在茶馆吃了几碗茶,到湖沿上开着窗户的座位跟前坐下。见那一船一船男女老少来烧香的,有...

  • 古诗词创作技巧目录

    一 初学仿写 1.1引言 1.2初学仿写之咏鹅 1.3初学仿写之静夜思 1.4初学仿写之出塞 1.5 初学仿写之天...

  • 古诗词创作技巧总目录

    第一章 初级仿写 1.1引言 1.2初学仿写之咏鹅 1.3初学仿写之静夜思 1.4初学仿写之出塞 1.5 初学仿写...

  • 学习仿写

    学习 目标 ①研读优秀作品,确定仿写要点。 ②根据仿写要求,学会片段仿写。③学会融会贯通,进行全文仿写。 1导课。...

  • 学习仿写

    学习 目标 ①研读优秀作品,确定仿写要点。 ②根据仿写要求,学会片段仿写。③学会融会贯通,进行全文仿写。 1导课。...

  • 古诗词写作技巧目录

    1.1引言 1.2初学仿写之咏鹅 1.3初学仿写之静夜思 1.4初学仿写之出塞 1.5 初学仿写之天净沙·秋思 1...

  • 读写营作业14

    【主题】散文片段仿写。自选符合自己风格的散文作品进行模仿。200字以内的仿写片段,注明仿写对象。 我仿写的是刘亮程...

网友评论

      本文标题:react--仿写antd.Form

      本文链接:https://www.haomeiwen.com/subject/mdewsrtx.html