关于ant-design Form表单使用的小技巧

Posted 2023-03-10

参考技术A 本文简单分析了下 Form 组件的特点，以及定制化输入组件的封装技巧，希望对大家有所帮助。

Form.create() 返回一个HOC，将内部创建的 form 对象通过 props 传递给 FormDemo 组件， form 提供的 getFiledDecorator api从用法上看也是一个HOC，通过该api包装后的 Input 组件已经和 FormDemo 上层的HOC双向绑定，我们可以通过 form.validateFields 做表单域校验，获取表单值等操作。

实际上 form.getFiledDecorator() 返回的HOC给包裹的组件设置了 value 和 onChange 两个props，顶层HOC在提供的 onChange 内部劫持组件的输入变化，保存状态，同步 value ，从而实现双向绑定。

经过分析，实际上 form.getFiledDecorator 包裹的组件不一定非得是 antd 提供的输入组件，我们自己也可以封装针对特定业务场景使用的复杂组件，只要在组件内部绑定来自HOC的 value 以及触发来自HOC的 onChange 事件，即可实现和 form 的双向绑定，从而充分利用 Form 组件的特性。