二次封装Antd中的Form，根据配置项生成表单，一天写999个表单不是梦

前端

2024-02-22 20:02:08

在后台管理项目中，表单是必不可少的。一个项目中可能会有成百上千个表单，如果每一个表单都手动编写，将会是一件非常耗时且容易出错的事情。因此，为了提高表单开发效率，我们可以对Antd中的Form组件进行二次封装，通过配置项生成表单。

配置项

在二次封装Form组件时，我们需要定义一个配置项对象，其中包含了生成表单所需的所有信息。这个配置项对象可以包含以下字段：

key：表单项的唯一标识符。
label：表单项的标签。
type：表单项的类型。
options：表单项的选项（如果是选择框或单选框）。
placeholder：表单项的提示信息。
defaultValue：表单项的默认值。
rules：表单项的校验规则。

生成表单

根据配置项对象，我们可以通过以下步骤生成表单：

创建一个Form组件的实例。
根据配置项对象中的信息，创建各个表单项。
将表单项添加到Form组件中。
将Form组件渲染到页面上。

示例代码

以下是一个根据配置项生成表单的示例代码：

import React, { useState } from "react";
import { Form, Input, Select, Radio, Checkbox, Button } from "antd";

const FormGenerator = ({ config }) => {
  const [form] = Form.useForm();

  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      {config.map((item) => {
        switch (item.type) {
          case "input":
            return (
              <Form.Item label={item.label} name={item.key}>
                <Input placeholder={item.placeholder} />
              </Form.Item>
            );
          case "select":
            return (
              <Form.Item label={item.label} name={item.key}>
                <Select options={item.options} placeholder={item.placeholder} />
              </Form.Item>
            );
          case "radio":
            return (
              <Form.Item label={item.label} name={item.key}>
                <Radio.Group options={item.options} />
              </Form.Item>
            );
          case "checkbox":
            return (
              <Form.Item label={item.label} name={item.key}>
                <Checkbox.Group options={item.options} />
              </Form.Item>
            );
          default:
            return null;
        }
      })}

      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default FormGenerator;