封装一个可配置的表单（基于antd）

大家好～～～我是一枚程序鱼🐟。

相信对于前端岗位来说，书写表单的功能肯定是最常有的。那面对表单里，有许多不同的类型的表单项时，我们首先想的肯定是平铺下来。其实功能是好实现的，但是对于后期的成本维护的代价比较大。所以我就想着封装一个可配置化的表单组件。

form表单中有input，radio，checkbox等类型的组件。那我能不能根据表单项的类型去渲染呢？

就比如：我可以定义一个type字段，当type='input'时，就渲染input组件……对于其他属性，我们可以不更改。但是对于有更多复杂的业务需求时，我们倒可以将组件单独的封装出去。

import React from 'react';
import { Form, Input, InputNumber, Radio, Checkbox } from 'antd';
import SelectBox from './SelectBox';
import { files } from '../../util';

const { useForm } = Form;

function ConfigurableForm() {
  const [form] = useForm();
  const renderComponents = (type) => {
    switch (type) {
      case 'input':
        return <Input />;
      case 'select':
        return <SelectBox />;
      case 'inputNumber':
        return <InputNumber />;
      case 'radio':
        return <Radio />;
      case 'checkBox':
        return <Checkbox />;
      default:
        break;
    }
  };
  return (
    <div className="form-class-style">
      <Form form={form}>
        {
          files?.map((item) => (
            <Form.Item
              {...item.formItemConfig}
              name={item.key}
              key={item.key}
            >
              {renderComponents(item.type)}
            </Form.Item>
          ))
        }
      </Form>
    </div>
  )
}

export default ConfigurableForm;

代码中的fieds是一个配置列表。 结构如下：

// 表单配置列表
export const files = [
  {
    type: 'input',
    key: 'inputname',
    formItemConfig: {
      label: 'input框',
    }
  },
  {
    type: 'select',
    key: 'selectname',
    formItemConfig: {
      label: 'select框',
    }
  },
  {
    type: 'inputNumber',
    key: 'inputNumbername',
    formItemConfig: {
      label: 'inputNumber框',
      max: 100,
      min: 0,
    }
  },
  {
    type: 'radio',
    key: 'radioname',
    formItemConfig: {
      label: 'radio框',
    }
  },
  {
    type: 'Checkbox',
    key: 'Checkboxname',
    formItemConfig: {
      label: 'Checkbox框',
    }
  }
];

关于表单的样式，我觉得大家可以自行去调整。

 

最近我发现了这个链接，react-jsonschema-form同样的这也可以通过配置，来渲染表单。

感觉有帮助的小伙伴点个赞呗～～～