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(
      <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)