antDeaign-form-getFieldDecorator 使用注意事项
Posted fengwenya
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
以上是关于antDeaign-form-getFieldDecorator 使用注意事项的主要内容,如果未能解决你的问题,请参考以下文章