Ant Design Mini 表单组件支持嵌套字段的设计解析

### 设置 Ant Design 表单初始值或动态赋值 #### 使用 `initialValues` 属性设置表单初始值 当创建基于 `Form` 的组件时，可以利用 `initialValues` 属性来设定各个字段的默认值。此方法适合于首次渲染页面或者新增记录场景。 ```jsx <Form initialValues={{ username: 'defaultUsername', rememberMe: true }}> {/* form items */} </Form> ``` 对于下拉选择器 (`Select`) 类型控件同样适用该属性完成初始选项的选择[^1]。 #### 动态更新已存在实例中的表单数据 针对已经挂载好的表单组件而言，则应通过调用 `setFieldsValue()` 方法实现对其内部状态的数据填充操作。这种方式常用于编辑已有条目或是响应外部事件触发后的即时刷新需求。 ```javascript this.form.setFieldsValue({ name: '新名字', }); ``` 如果涉及到较多嵌套结构或其他复杂逻辑处理的情况下，推荐借助第三方工具库如 Lodash 来简化对象映射过程并提高代码可读性和维护性： ```javascript import pick from 'lodash.pick'; async function fetchAndSetFormData() { const response = await someApiCall(); const selectedKeys = ['id', 'title', 'content']; this.$nextTick(() => { this.form.setFieldsValue(pick(response.data, selectedKeys)); }); } ``` 值得注意的是，在某些特定类型的输入项上可能还需要额外指定 `valuePropName` 参数以确保正确识别其对应的值名称，比如开关按钮(`Switch`)就需要将其设为 `"checked"` 才能正常工作[^2]。 ```jsx <Form.Item name="activeStatus" label="Active Status" valuePropName="checked"> <Switch /> </Form.Item> ``` 综上所述，无论是静态定义还是运行期间调整，Ant Design 都提供了灵活多样的手段帮助开发者轻松管理表单项的状态变化。