### 如何在 Ant Design 中使用 Form 组件的 Hook #### 使用 `useForm` 配合 Ant Design 表单组件 为了更好地管理表单的状态和逻辑，在 React 应用程序中可以借助 `useForm` 这一核心 Hook 来操作由 Ant Design 提供的 `<Form>` 组件[^1]。 ```jsx import { Form, Input, Button } from 'antd'; import { useForm } from 'antd/es/form'; const MyFormComponent = () => { const [form] = useForm(); const onFinish = (values) => { console.log('Received values of form:', values); }; return ( <Form form={form} name="my_form" onFinish={onFinish}> <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> <Form.Item wrapperCol={{ offset: 8, span: 16 }}> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ``` 上述代码片段展示了如何初始化并配置一个简单的登录表单，其中包含了用户名输入框及其对应的校验规则。当提交按钮被点击时会触发 `onFinish` 函数执行，并打印出收集到的数据对象[^3]。 #### 结合 `{...register}` 注册字段与验证 除了直接定义 `rules` 属性外，还可以利用来自第三方库（如 React Hook Form）中的功能增强表单控制能力。不过对于本例而言，主要关注的是原生支持的方式[^2]。 #### 动态增删项及其他高级特性 有时可能需要动态调整表单项的数量或结构，这时可以通过编程方式调用 `form` 实例的方法实现更复杂的交互需求。例如： - 添加新条目：`form.setFieldsValue({ key: value });` - 移除现有条目：先移除 DOM 节点再同步更新模型数据； 更多细节可参阅官方文档获取最新最全的信息[^4]。