如何在 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 中的项目。

谁能给我解决方案？

原文由 Adelin Ionut 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Marcelo 发布，翻译遵循 CC BY-SA 4.0 许可协议