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

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

主要的几个点：

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

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

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

具体的代码如下:

//BaseItem.js（原子层）
const BaseItem = (props) => {
  const { form: { getFieldDecorator }, config } = props;
  const { name, children, ...argv } = config;
  return name ? getFieldDecorator(name, { ...argv })(children) : (children);
}
 
export default BaseItem;

//ItemLayout.js（UI组件）
import React from 'react';
import { Form } from 'antd';
 
//Layout也可以用自己的UI组件
const Layout = ({ config: { itemOptions }, children }) =>
  <Form.Item { ...itemOptions } >{ children }</Form.Item>
 
const hidden = (isHidden) => {
  const type = typeof(isHidden);
  return (type === 'function' && isHidden()) || type === undefined || isHidden;
    //默认是显示
}
 
class ItemLayout extends React.Component {
  render() {
    const { children } = this.props;
    return(
      <>
        {
          React.Children.map(
            children, (child, i) => {
              const { config: { isHidden, ...argv}} = child.props;
              return hidden(isHidden) ? null : //具有隐藏表单项能力
                  React.cloneElement(
                    <Layout { ...argv }>{ child }</Layout>,
                    {
                      ...children.props
                    }
                  )
            }
          )
        }
      </>
    )
  }
}
 
export default ItemLayout;

//config.js（配置文件）
import React from 'react';
import { Input } from 'antd';
 
export const formConfig = () => {
  return [
   {
      itemOptions : { //Form.Item的api配置
        label: '姓名',
        //...argv
      },
      name: 'username',
      initialValue: '',
      className:'form1',
      rules: [],
      children: <Input  placeholder="input placeholder"/>
    },
    {
      itemOptions : {
        label: '密码',
      },
      name: 'password',
      test:"",
      initialValue: '',
      rules: [{ required: true, message: 'Please input your password!' }],
      children: <Input.Password />,
      isHidden: false //隐藏此项 默认是显示
    },
    {
      itemOptions : {
        label: '密码'
      },
      name: 'password',
      initialValue: '',
      rules: [],
      children: <Input />,
      isHidden: () => true //通过方法来动态显示隐藏
    },
  ]
}

支持antd Form 所有的api。

配置文件为什么是使用函数的形式？因为可以通过函数的参数，实现配置文件和页面之间进行数据的传递。

在页面就这样使用，代码如下:

import React from 'react';
import { Form, Input } from 'antd';
import { formConfig } from './config.js';
import BaseItem from './BaseItem';
import ItemLayout from './ItemLayout';
 
@Form.create()
class MyTestForm extends React.Component {
  render() {
    const { form } = this.props;
    return(
      <Form>
        {
          formConfig().map((item, i) => 
             <ItemLayout><BaseItem key={i} config={item} form={form}/></ItemLayout>)
        }
      </Form>
    )
  }
}
 
export default MyTestForm;

相比传统搭建Form是不是快捷了很多，而且页面代码层面更显得更清晰。