Antd V4 表单列表 setFieldValue [英] Antd V4 form list setFieldValue

问题描述

在此处输入代码如何动态编辑表单列表中的元素并使用 setFieldsValue 设置该元素

enter code hereHow can we dynamically edit an element in form list and set that element using setFieldsValue

我得到的一个解决方案是为整个表单列表调用 setFieldsValue 但这不公平，会导致性能问题

A solution I got is call setFieldsValue for entire form List but that is not fair, cause performance issue

我有这样的表单结构

users: [
  {
    name: "bob",
    education: [
      {
        qualification: "masters",
        college: "abc",
      },
      {
        qualification: "degree",
        collge: "ijk",
      },
    ],
  },
  {
    name: "alice",
    education: [
      {
        qualification: "ug",
        college: "abc",
      },
      {
        qualification: "higher secondary",
        college: "def",
      },
    ],
  },
];

使用表单列表实现

• 我想更新用户alice"的教育[1]"的资格"使用 antd v4 setFieldsValue
• 我得到了一个解决方案，即使用 getFieldsValue 和更改更改资格"，然后更新整个表单值，但是它会导致一些性能问题大型应用程序
• 如何使用 setFieldsValue 更新表单中的单个字段?

• 在 antd v3 中，它是通过在 setFeildsValue 中提供路径来归档的，例如

• I want to update 'qualification' of 'education[1]' of user 'alice' using antd v4 setFieldsValue
• I got a solution that is, take all values using getFieldsValue and change change 'qualification' and then update entire form value, but it causes some performance issue large applications
• How to use setFieldsValue to update a single field in form?

• In antd v3 it is archived by providing path in setFeildsValue like

setFieldsValue({ 'user.1.education.1.qualification':'something' })

setFieldsValue({ 'user.1.education.1.qualification':'something' })

提前感谢您的宝贵回答

推荐答案

如果你不明白@Ajish 的回答(像我一样)，我会试着解释一下:

In case you didn't understand @Ajish answer (like me), I'll try to explain it:

正如 Antd 文档 所说，您需要传递一个 FieldData[] 到您的 form.setFields() 方法.就我而言，我只需要更新一个字段，并且我只使用了 FieldData 中的 name 和 value 属性.因此，我的代码是这样的:

As Antd docs says, you need to pass a FieldData[] to your form.setFields() method. In my case, I need to update only one field and I only used name and value properties from FieldData. Therefore, my code was like this:

form.setFields([
  {
    name: ['products', fieldIndex, 'total-value'],
    value: totalValue,
  },
]);

Name 属性是一个 NamePath 由:

• 'products':我的 Form.List 组件的名称；
• fieldIndex:引用我要更新的对象的索引；
• 'total-value':我要更新的字段.

为了进一步澄清，products 具有以下格式:

To clarify even more, products has this format:

products: [
  {
    quantity: 0,
    'unit-value': 0,
    'total-value': 0,
   },
 ],

这篇关于Antd V4 表单列表 setFieldValue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！