今天看啥  ›  专栏  ›  神光的编程秘籍

天天用 antd 的 Form 组件?自己手写一个吧

神光的编程秘籍  · 公众号  ·  · 2024-04-10 12:49
大家写中后台系统的时候,应该都用过 Ant Design 的 Form 组件:用 Form.Item 包裹 Input、Checkbox 等表单项,可以定义 rules,也就是每个表单项的校验规则。外层 Form 定义 initialValues 初始值,onFinish 当提交时的回调,onFinishFailed 当提交有错误时的回调。Form 组件每天都在用,那它是怎么实现的呢?其实原理不复杂。每个表单项都有 value 和 onChange 参数,我们只要在 Item 组件里给 children 传入这俩参数,把值收集到全局的 Store 里。这样在 Store 里就存储了所有表单项的值,在 submit 时就可以取出来传入 onFinish 回调。并且,还可以用 async-validator 对表单项做校验,如果有错误,就把错误收集起来传入 onFinishFailed 回调。那这些 Item 是怎么拿到 Store 来同步表单值的呢?用 Context。在 Form 里保存 Store 到 Context,然后在 Item 里取出 Context 的 Store 来,同步表单值到 Store。我 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照