如何在Form.List中使用Antd4中的setFieldsValue动态设置值

Question

<Form>
<Form.List name="projects">
{fields => 
...
fields.map(field => <Form.Item name={[field.key, "type"]} hidden={true} initialValue={type} />)
...
}
</Form.List>
</Form>

每当type更改时，我都希望动态设置Item值。我想我可以使用useForm获得表单实例，并使用setFieldsValue，如下所示。

form = useForm()
onChange(type) {
form.setFieldsValue(/* values here */)
}

但我不知道如何使用form.setFieldsValue来引用Form.List.中的项目

谁能给我解决方案？

Answer 1

Antd表单列表创建一个项目对象数组。然后，有必要在包含将更改值的项的数组中定位对象的位置。

返回表单项的所有值：

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>
);
}

Answer 2

管理这些嵌套值的方法之一是获取整个值并更改所需的属性，然后将其传递到表单：

const value = form.getFieldValue(field.key)
form.setFieldsValue({[field.key]: {...value, ['type']: your_new_value}})

Answer 3

我没有突变。因为突变没有刷新更新的字段。

只是一个想法：

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 })
}

Answer 4

这对我有效。

const data = form.getFieldValue('projects');
data[key] = { ...data[key], [property name]: 'new property value' };
form.setFieldValue('projects', data);

我希望这对你或任何读到这篇文章的人都有帮助。编码快乐！