如何解决如何在Antd 4中使用setFieldsValue在Form.List内部动态设置值?
<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中的项目。
谁可以给我解决方案?
解决方法
管理这些嵌套值的一种方法是获取整个值并更改所需的属性,然后将其传递给表单:
const value = form.getFieldValue(field.key)
form.setFieldsValue({[field.key]: {...value,['type']: your_new_value}})
,
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>
);
}
,
我做到了没有突变。因为突变没有刷新更新的字段。
只是一个想法:
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 })
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。