antd表单的简易封装

封装antd的Form表单（简易版）

封装一个from模板，后面想用直接调就可以了

模板

import React from "react";
import { Form } from "antd";

function BaseForm(props: any) {
  const { formItem, onFinish, config, form, btnGroup } = props;
  return (
    <div>
      <Form onFinish={onFinish} form={form}>
        {formItem.map((item: any) => (
          <div key={item.id}>
            <Form.Item name={item.id} label={item.label} {...config}>
              {item.ele}
            </Form.Item>
          </div>
        ))}
        <Form.Item>{btnGroup}</Form.Item>
      </Form>
    </div>
  );
}

export default BaseForm;

调用

import { Button, Input } from "antd";
import React from "react";
import BaseForm from "./components/BaseForm";
import "antd/dist/antd.css";

function index() {
  const formItem = [
    {
      label: "第一个",
      id: `first`,
      ele: <Input placeholder="请输入" allowClear />,
    },
    {
      label: "第二个",
      id: `two`,
      ele: <Input placeholder="请输入" allowClear />,
    },
    {
      label: "第三个",
      id: `third`,
      ele: <Input placeholder="请输入" allowClear />,
    },
  ];
  const onFinish = (val: any) => {
    console.log(val);
  };
  const formOption = {
    formItem,
    onFinish: onFinish,
    btnGroup: (
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    ),
  };
  return (
    <div>
      <BaseForm {...formOption} />
    </div>
  );
}

export default index;