antd mobile里Form组件表单里有多个Form.Item，如何单独提取其中一个Form.Item的内容

### 获取 Ant Design Mobile 表单组件中的单项值在 Ant Design Mobile 的 `Form` 组件中，可以通过 `form` 实例来访问和操作表单项的值。具体来说，可以利用 `useForm` 钩子创建一个 `form` 实例，并通过该实例的方法（如 `getFieldValue` 或者 `getFieldsValue`）提取特定项的值。以下是实现方法的一个完整示例： #### 创建并初始化 Form 实例首先，使用 `useForm` 方法创建一个 `form` 实例，并将其传递给 `Form` 组件作为属性[^1]。 ```tsx import React from 'react'; import { Button, Form, Input, Space } from 'antd-mobile'; import { useForm } from 'antd-mobile/es/components/form'; const MyComponent: React.FC = () => { const [form] = useForm(); // 提取指定字段的值 const handleExtractSingleValue = () => { const username = form.getFieldValue('username'); // 获取名为 'username' 字段的当前值 console.log(username); }; return ( <Space direction="vertical" block style={{ padding: 20 }}> {/* 将 form 实例绑定到 Form */} <Form form={form} layout="horizontal"> <Form.Item name="username" label="用户名" required> <Input placeholder="请输入用户名" /> </Form.Item> <Button onClick={handleExtractSingleValue}>获取用户名</Button> </Form> </Space> ); }; export default MyComponent; ``` #### 关键点解析 - **`useForm`**: 这是一个钩子函数，用于创建和管理表单的状态以及交互逻辑[^1]。 - **`getFieldValue(name)`**: 此方法允许开发者按名称提取某个表单项的最新值。 - **`name` 属性**: 每个 `Form.Item` 必须定义唯一的 `name` 值以便于识别其对应的输入数据[^1]。如果需要批量读取多个字段，则可改用 `getFieldsValue()` 方法返回整个表单的数据对象。 #### 注意事项当动态增删表单项或者嵌套结构较为复杂时，应特别注意路径配置是否正确匹配实际 DOM 结构[^1]。此外，在异步场景下调用这些 API 之前最好确认相关依赖已加载完成以免引发错误行为。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇单独提取Form表单里其中一部分的内容