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>