### 如何在 React 中使用 Ant Design Form 创建表单 #### 表单创建与初始化 为了在 React 应用程序中利用 Ant Design 的 `Form` 组件来创建表单，首先需要安装并导入所需的包。接着可以借助 `Form.useForm()` 方法获取到一个用于管理该表单位件状态的对象实例[^2]。 ```jsx import React, { useEffect, useState } from 'react'; import { Form, Input, Button } from 'antd'; const MyCustomForm = () => { const [form] = Form.useForm(); return ( <Form form={form} name="my_custom_form"> {/* 表单项 */} </Form> ); }; ``` #### 添加输入控件 向表单内添加各种类型的输入框，比如文本输入、密码输入等，可以通过嵌套不同的 Ant Design 输入组件完成。这些子组件应当作为 `<Form.Item>` 的孩子节点存在，并为其指定唯一的名称属性以便后续访问其值[^3]。 ```jsx <Form.Item label="用户名" name="username" rules={[ { required: true, message: '请输入您的用户名!' }, ]} > <Input /> </Form.Item> <Form.Item label="密码" name="password" rules={[{ required: true, message: '请输入密码!' }]} > <Input.Password /> </Form.Item> ``` #### 提交处理函数 当用户点击提交按钮时触发事件处理器，在此期间可调用由 `useForm()` 返回对象所提供的 API 来收集所有字段的数据或执行其他操作，例如验证整个表单的有效性。 ```jsx const onFinish = (values) => { console.log('Received values of form:', values); }; // ... <Button type="primary" htmlType="submit">Submit</Button> ``` #### 自定义校验规则 对于更复杂的业务场景下的特殊检验需求，则可通过配置项中的 `rules` 属性来自定义额外的校验逻辑。这允许开发者针对特定条件实施更加严格的约束检查[^1]。 ```jsx <Form.Item hasFeedback label="E-mail" name="email" rules={[ { type: 'email', message: 'The input is not valid E-mail!', }, { required: true, message: 'Please input your E-mail!', }, ]} > <Input /> </Form.Item> ```