AntDesign表单的理解与使用
基本介绍 虽然 react 没有内置的表单验证逻辑,但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。 具体地, AntDesign 中的表单组件 Form 与表单域 Form.Item (用于包裹任意输入控制的容器)配合使用: 在 Form.Item 中设置校验规则,在 表单提交 或 表单输入变化 时,通过执行 this.props.form.validateFields() 来实现表单值的 校验 。 在 Form.Item 中放置一个被 getFieldDecorator 注册的表单控件(子元素)来实现表单控件与表单的双向绑定,实现表单值的 收集 。 使用 Form 自带的自动收集数据和校验功能的 关键 是需要使用 Form.create() 包装组件(传送门👉 AntDesign 官方文档 )。 Form.create() 是一个高阶函数,通过传入一个 react 组件,返回一个新的具有 注册 、 收集 、 校验 功能的 react 组件。使用方式如下: class CustomizedForm extends React.Component {} CustomizedForm = Form.create({})(CustomizedForm); export default CustomizedForm; 复制代码 经