react antd 封装from

React Ant Design是一个基于Ant Design设计体系的React组件库，它提供了丰富的UI组件和一套易用的API，使得开发者能够快速构建企业级前端应用。封装Form是Ant Design的一项重要功能，它提供了一个高级的表单解决方案，叫做`Form`，它简化了表单管理和数据校验流程。

`antd Form`的核心包括`Form.create()`和`<Form>`组件。`Form.create()`是一个高阶函数，接受一个配置项，用于创建一个包裹所有表单组件的容器，这个容器会处理如状态管理、提交验证等底层细节。`<Form>`组件则是实际展示表单的地方，内部包含了各种`getFieldDecorator`、`getFieldProps`等辅助方法，可以方便地绑定字段值、进行数据绑定以及添加验证规则。

举个例子：

import { Form, Input } from 'antd';

const WrappedForm = Form.create()(props => {
  return (
    <form>
      {/* 使用getFieldDecorator将Input组件连接到表单状态 */}
      <Form.Item label="姓名">
        {Form.getFieldDecorator('name', {
          rules: [{ required: true, message: '请输入姓名' }],
        })(<Input />)}
      </Form.Item>

      {/* 提交按钮，form onSubmit事件会被自动触发 */}
      <Form.Item wrapperCol={{ offset: 8 }}>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </form>
  );
});

export default WrappedForm;