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

文章预览

大家写中后台系统的时候，应该都用过 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 来，同步表单值到 S ………………………………