### 解析 Ant Design Form `getFieldsValue` 获取不到表单字段值的原因 当遇到使用 Ant Design 的 Form 组件时，调用 `getFieldsValue` 方法无法获取到预期的表单字段值的情况，通常是因为表单项未被正确注册至表单中[^1]。 为了确保 Select 或其他输入组件能够正常工作并能通过 `getFieldsValue` 正确返回其值，需确认这些组件已通过适当的方式进行了初始化和绑定。对于旧版本的 antd 可能会涉及到 `getFieldDecorator` 的使用；而在较新的版本里，则推荐采用 `Form.Item` 结合 `rules` 和 `name` 属性来完成这一过程[^2]。 具体来说，在定义表单项时应指定唯一的名称属性 (`name`) 并将其关联到对应的控件上： ```jsx <Form> <Form.Item name="selectField" label="Select Label"> <Select defaultValue="defaultVal"> {/* 使用默认值 */} <Option value="option1">Option 1</Option> <Option value="option2">Option 2</Option> </Select> </Form.Item> </Form> ``` 此外，如果是在 Vue 版本下操作，则需要注意的是应当利用 `$refs` 来访问底层 form 实例，并且可能还需要配合 `this.$nextTick()` 确保 DOM 更新完毕后再执行设置或读取逻辑[^3]。 最后值得注意的一点是，对于初始值设定方面，除了可以像上述那样直接在 `<Select>` 中提供 `defaultValue` 外，也可以借助于 `initialValues` 配置项一次性为多个字段赋予初值，这取决于实际应用场景和个人偏好。 ### 示例代码展示如何正确配置以使 `getFieldsValue` 能够成功取得值 下面给出一段基于 React 的例子说明怎样适当地构建表单结构从而让 `getFieldsValue` 函数按期望运作: ```jsx import React from 'react'; import { Form, Input, Button } from 'antd'; const MyForm = () => { const [form] = Form.useForm(); const onFinish = (values) => { console.log('Received values of form:', values); }; return ( <> <Form form={form} initialValues={{ remember: true }} onFinish={onFinish}> <Form.Item name="username" rules={[{ required: true }]}> <Input /> </Form.Item> <Form.Item wrapperCol={{ offset: 8 }}> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> <button onClick={() => console.log(form.getFieldsValue())}>Log Values</button> </> ); }; export default MyForm; ``` 此段代码展示了创建一个简单的登录界面，其中包含了用户名输入框以及提交按钮。点击自定义的日志记录按钮将会打印当前所有填写过的表单项及其相应的值。