如何在Antd 4中使用setFieldsValue在Form.List中动态设置值？
如何在Antd 4中使用setFieldsValue在Form.List中动态设置值？
提问于 2020-09-03 01:52:45
<Form>
<Form.List name="projects">
{fields =>
...
fields.map(field => <Form.Item name={[field.key, "type"]} hidden={true} initialValue={type} />)
...
}
</Form.List>
</Form>每当type发生变化时，我都希望动态设置项值。我想我可以使用useForm和setFieldsValue来获得表单实例，如下所示。
form = useForm()
onChange(type) {
form.setFieldsValue(/* values here */)
}但我不确定如何在Form.List中使用form.setFieldsValue来引用项目。
谁能给我一个解决方案？
回答 3
Stack Overflow用户
发布于 2020-11-08 02:16:03
Antd表单列表创建一个item对象数组。则有必要定位对象在数组中的位置，该数组包含将改变值的项。
返回表单项的所有值：
const fields = form.getFieldsValue()检索包含表单列表对象的数组：
const {projects} = fields传递对象在数组中的位置，并将该项更改为新值：
Object.assign(projects[key], {type: value})然后将新的数组值传递给表单：
form.setFieldsValue({projects})下面是一个完整的示例：
import React from 'react';
import { Form, Select, Button } from 'antd'
const { Option } = Select
export default function FormProject() {
const [ form ] = Form.useForm()
const onChange = (value, key) => {
const fields = form.getFieldsValue()
const { projects } = fields
Object.assign(projects[key], { type: value })
form.setFieldsValue({ projects })
}
return (
<Form
form={form}
initialValue={{type: "type_1"}}
>
<Form.List name="projects">
{(fields, { add, remove }) => (
<div>
<Form.Item>
<Button type="dashed" onClick={add} >
Add
</Button>
</Form.Item>
{fields.map(field => (
<div>
<Form.Item name={[field.key, "type"]} hidden={true} />
<Form.Item noStyle name={[field.name, 'id']}>
<Button type="dashed" onClick={remove} >
Remove
</Button>
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'type_project']}
label="Tipo"
fieldKey={[field.fieldKey, 'type_project']}
>
<Select onChange={e => onChange(e, field.key)}>
<Option value="type_1">Type 1</Option>
<Option value="type_2">Type 2</Option>
<Option value="type_1">Type 2</Option>
</Select>
</Form.Item>
</div>
))}
</div>
)}
</Form.List>
</Form>
);
}Stack Overflow用户
发布于 2020-09-06 16:05:13
管理这些嵌套值的方法之一是获取整个值并更改所需的属性，然后将其传递给表单：
const value = form.getFieldValue(field.key)
form.setFieldsValue({[field.key]: {...value, ['type']: your_new_value}})Stack Overflow用户
发布于 2021-03-30 00:36:33
我做出来的时候没有突变。因为突变不会刷新更新的字段。
这只是一个想法：
const onChange = (value, originalProject) => {
const projects = form.getFieldsValue('projects')
const updatedProjects = projects.map(project => {
if (project.id === originalProject.id) {
return {
...project,
updateKey: value
}
}
return project;
})
form.setFieldsValue({ projects: updatedProjects })
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63711080
复制相关文章
相似问题
腾讯云开发者
