@Form.create() getFieldDecorator render <Form.Item> validateFields
@Form.create()
这是一个高阶函数,传入的是react组件,返回一个新的react组件,在函数内部会对传入组件进行改造,添加上一定的方法用于进行一些秘密操作 如果有对高阶组件有想要深入的请移步 《深入理解 React 高阶组件》 ,我们这里不做过多的深究。
经 Form.create()
包装过的组件会自带 this.props.form
属性
// 使用方式如下: class CustomizedForm extends React.Component {} CustomizedForm = Form.create({})(CustomizedForm); 复制代码
代码中结合 @
的修饰器,用 @Form.create()
进行创建。
getFieldDecorator
用于和表单进行双向绑定
<!-- 表单数据绑定 --> <Form.Item {...formItemLayout} label={'名称'}> {getFieldDecorator('searchName')( <Input placeholder={'请输入名称'} /> )} </Form.Item> 复制代码
render <Form.Item>
在定义表单字段的时候,渲染到页面中,与步骤2代码一致
更多FormItem属性请参考 Ant Design - Form - Form.Item
validateFields
校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件
const { form } = this.props; // 获取并检查表单数据 form.validateFields((err, fieldsValue) => { if (err) return; const { searchName = '' } = fieldsValue; }); 复制代码