antDeaign-form-getFieldDecorator 使用注意事项

2020-01-06

antDeaign-form-getFieldDecorator 使用注意事项

一、使用getFieldDecorator之前，必须先使用 Form.create({ })(Form) 将表单组件包裹起来

class ControlForm extends React.Component {} // 导出时将组件 ControlForm 用 Form.create()包裹起来
export default Form.create()(ControlForm)

 

二、经过 Form.create 包装的组件将会自带 this.props.form 属性，通过解构赋值将 form 解构出来

// 解构出 form
const {form} = this.props
 // 解构出 getFieldDecorator
const {getFieldDecorator} = form

 

三、使用 getFieldDecorator 方法

 

<Form.Item label={item.label}> { getFieldDecorator(item.label, { // 默认值（初始值）
     initialValue: 5, // 校验规则：最大长度、最小长度、校验文案、正则表达式校验、是否必选
 rules: [ { min: 3, max: 5, message: '长度应在3~5个字符', }, { required: true, }, { pattern: '^[a-zA-Z]\w{5,17}$', message: '以字母开头，长度在6~18之间，只能包含字母、数字和下划线)', }, ], })(<Input />)}
</Form.Item>