antd提交表单_antd快速开发（Form篇）

前言

由于一直在做中台业务，后台项目特别多，但是后台项目的特点是：大量的列表和大量表单，重复开发会降低效率，所以我这边总结了一下使用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(

{

getFieldDecorator('username', {

rules: [

{

required: true,

message: '这是必填项'

}

]

})()

}

{

getFieldDecorator('password', {

rules: [

{

required: true,

message: '这是必填项'

}

]

})()

}

)

}

}

export default MyTestForm;

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

优化后的Form

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

主要的几个点：将最底层，最重要的部分抽离出来，也就是BaseItem组件，BaseItem具备的能力是form的能力，双向绑定的能力等，这是个纯净的组件，不包含任何UI层面的东西。

UI层的东西也单独抽离出来，以方便以后UI层面的拓展。(例如想自己设计一套UI样式，就只用直接新开发一套UI层面的东西，而不用担心原子层组件的代码)。

每个表单的信息抽离成配置文件，使页面维护起来更方便。

具体的代码如下

//BaseItem.js(原子层)const BaseItem = (props) => {

const { form: { getFieldDecorator }, config } = props;

const { name, children, ...argv } = config;

return name ? getFieldDecorator(name, { ...argv })(