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

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

 

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

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

 

三、使用 getFieldDecorator 方法

 

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

版权声明：本文为fengwenya原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/fengwenya/p/12158415.html