zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    ubuntu安装后要做什么
    JavaScript错误处理
    jQuery 事件
    display的用法
    百度排名的原理
    什么是ajax?
    CSS文档流
    引用CSS的方法
    jQuery的安装方式
    禁止WPS2019开机自启动
  • 原文地址:https://www.cnblogs.com/fengwenya/p/12158415.html
Copyright © 2011-2022 走看看