antd form rules字数限制_antd快速开发（Form篇）-CSDN博客

本文链接：https://blog.csdn.net/weixin_29468561/article/details/112197178

本文总结了使用Ant Design的Form组件进行后台开发的经验，包括传统Form搭建的缺点和优化后的Form结构，强调了组件化和配置化的优点。通过示例展示了如何封装自定义组件和搜索表单，同时提醒了在使用Form时应注意的几个问题，如设置初始值和重置表单。文章最后提到了Antd Form的新改动，并预告了更多关于Antd组件业务场景优化的内容。

摘要由CSDN通过智能技术生成

前言

由于一直在做中台业务，后台项目特别多，但是后台项目的特点是：大量的列表和大量表单，重复开发会降低效率，所以我这边总结了一下使用antd组件搭建form的快捷方法。希望能对大家有用。

传统Form搭建

首先传统搭建一个form表单，那么代码可能会是下面这样子

import React from 'react';
import {
     Form, Input } from 'antd';

@Form.create()
class MyTestForm extends React.Component {
    
 render() {
    
   const {
     form: {
     getFieldDecorator } } = this.props;
   return(
     <Form>
       <Form.Item label='姓名'>
        {
    
           getFieldDecorator('username', {
    
             rules: [
              {
    
                 required: true,
                 message: '这是必填项'
              }
            ]
          })(<Input placeholder="placeholder" />)
        }
       </Form.Item>
       <Form.Item label='密码'>
        {
    
           getFieldDecorator('password', {
    
             rules: [
              {
    
                 required: true,
                 message: '这是必填项'
              }
            ]
          })(<Input placeholder="placeholder" />)
        }
       </Form.Item>
     </Form>
  )
}
}

export default MyTestForm;

目前只有两个表单项，看起来代码还挺清晰的，假如这个表单是很复杂的表单，有多个表单项，这块的代码会很长，维护和开发起来都是不方便，最重要的再来一个大的表单，你还是会需要写这么多的代码。这样就影响了开效率。

优化后的Form

我们想要的是，尽量少写（不写）重复性的代码，让代码的复用性更高。我这块做了一些优化，主要的流程如图：

主要的几个点：

将最底层，最重要的部分抽离出来，也就是BaseItem组件，BaseItem具备的能力是form的能力，双向绑定的能力等，这是个纯净的组件，不包含任何UI层面的东西。
UI层的东西也单独抽离出来，以方便以后UI层面的拓展。（例如想自己设计一套UI样式，就只用直接新开发一套UI层面的东西，而不用担心原子层组件的代码）。
每个表单的信息抽离成配置文件，使页面维护起来更方便。

具体的代码如下

//BaseItem.js（原子层）
const BaseItem = (props) =