antd form配置封装

Ant Design是一个非常流行的React UI组件库，其中的Form组件可以帮助我们快速构建表单功能。为了方便开发，我们可以将Form组件进行封装，以便于在多个组件中复用。下面是一个基本的Antd Form配置封装示例：

import React from 'react';
import { Form, Button } from 'antd';

const { Item } = Form;

const FormWrapper = ({ form, onFinish, children }) => (
  <Form form={form} onFinish={onFinish}>
    {children}
    <Item>
      <Button type="primary" htmlType="submit">提交</Button>
    </Item>
  </Form>
);

export default FormWrapper;

在这个例子中，我们将Antd Form组件进行了封装，将其作为一个子组件传递给`FormWrapper`组件，`FormWrapper`组件通过props接收了一个`form`对象和一个`onFinish`函数，分别用于设置表单和表单提交时的回调函数。`Item`组件用于设置表单项，`children`用于传递其他表单项组件。

使用时，我们可以这样调用：

import React from 'react';
import { useForm } from 'antd/lib/form/Form';
import FormWrapper from './FormWrapper';

const MyForm = () => {
  const [form] = useForm();

  const onFinish = (values) => {
    console.log('form values:', values);
  };

  return (
    <FormWrapper form={form} onFinish={onFinish}>
      <Item name="username" label="用户名">
        <Input />
      </Item>
      <Item name="password" label="密码">
        <Input.Password />
      </Item>
    </FormWrapper>
  );
};

export default MyForm;

这样，我们就可以在`MyForm`组件中使用`FormWrapper`组件，并传入对应的`form`对象和`onFinish`回调函数，以及其他表单项组件。这样，我们就可以快速地构建一个简单的表单界面。