情况描述
官方的下图例子中,点击Fill form可以填充表单内容
代码如下:
表单内容
<Form.Item name="note" label="Note" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
<Select
placeholder="Select a option and change input text above"
onChange={onGenderChange}
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
<Button htmlType="button" onClick={onReset}>
Reset
</Button>
<Button type="link" htmlType="button" onClick={onFill}>
Fill form
</Button>
</Form.Item>
填充数据的方法
const onFill = () => {
form.setFieldsValue({
note: 'Hello world!',
gender: 'male',
});
};
点击填充后的效果
当需求是嵌套表单时,填充效果就会失效
代码如下:
// form.Item 的name值为多个时,此处以两个举例
<Form.Item name=["info","note"] label="Note" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name=["info","gender"] label="Gender" rules={[{ required: true }]}>
<Select
placeholder="Select a option and change input text above"
onChange={onGenderChange}
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
修改填充事件内容
// ==此处为错误示例==
const onFill = () => {
form.setFieldsValue({
'info.note': 'Hello world!',
'info.gender': 'male',
});
};
点击填充按钮毫无效果
问题解决
const onFill = () => {
form.setFieldsValue({
info: {
note: 'Hello world!',
gender: 'male',
}
});
};
试了多种方式后,发现用这种嵌套格式的方式设置可以设置成功。
但是在实际需求中,表单嵌套的层级是未知的,表单的name值也不是固定的,所以需要根据name值动态设置
// nameArr 为formItem - name的值
const innerValue = {
note: 'Hello world!',
gender: 'male',
}
const itemObj = (nameArr, innerValue) => {
let valueObj = {}
for (let i = nameArr.length - 1; i>=0; i--){
valueObj = (i == nameArr.length - 1 ? {[nameArr[i]]: innerValue} : {[nameArr[i]]: {...valueObj}})
}
return valueObj
}
const onFill = () => {
form.setFieldsValue(itemObj(nameArr, innerValue))
};
至此。可实现不同层级,任意name值的setFieldsValue