码迷,mamicode.com
首页 > 其他好文 > 详细

antDeaign-form-getFieldDecorator 使用注意事项

时间:2020-01-06 21:18:48      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:required   extend   color   react   正则   mes   最大   pat   属性   

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>

antDeaign-form-getFieldDecorator 使用注意事项

标签:required   extend   color   react   正则   mes   最大   pat   属性   

原文地址:https://www.cnblogs.com/fengwenya/p/12158415.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!