如何在 Antd 4 中使用 setFieldsValue 在 Form.List 中动态设置值？

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

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

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

Answer 2

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