封装ant表单

封装 ant 表单可以提高代码复用性和可维护性。下面是一个简单的例子，演示如何使用 HOC 封装 ant 表单组件：

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

const CustomForm = (props) => {
  const { form, handleSubmit, children } = props;

  const onFinish = (values) => {
    handleSubmit(values);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      {children}
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

const WrappedCustomForm = Form.create({
  name: 'custom_form',
})(CustomForm);

// 使用例子
const Demo = () => {
  const handleFormSubmit = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <WrappedCustomForm handleSubmit={handleFormSubmit}>
      <Form.Item label="Username" name="username">
        <Input />
      </Form.Item>
      <Form.Item label="Password" name="password">
        <Input.Password />
      </Form.Item>
    </WrappedCustomForm>
  );
};

在这个例子中，我们定义了一个 `CustomForm` 组件，它接收一个 `handleSubmit` 属性作为回调函数，用于处理表单提交事件。`CustomForm` 组件内部使用了 antd 的 `Form` 组件，将 `handleSubmit` 函数绑定到 `Form` 的 `onFinish` 事件上。我们还可以通过 `children` 属性向 `CustomForm` 组件传递表单元素，这些元素会被渲染到 `Form` 组件中。最后，我们使用 `Form.create()` 方法将 `CustomForm` 组件进行封装，生成一个新的组件 `WrappedCustomForm`，并将其导出供外部使用。在使用 `WrappedCustomForm` 组件时，我们只需要传递 `handleSubmit` 属性和表单元素即可。