Antd V4 表单列表 setFieldValue

IT技术 reactjs antd
2021-05-07 21:21:42

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

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

我有这样的表单结构

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

使用表单列表实现

  • 我想使用 antd v4 setFieldsValue 更新用户“alice”的“education[1]”的“资格”
  • 我得到了一个解决方案，即使用 getFieldsValue 获取所有值并更改更改“限定”，然后更新整个表单值，但这会导致一些性能问题大型应用程序
  • 如何使用 setFieldsValue 更新表单中的单个字段？

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

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

提前感谢您的宝贵回答

2个回答

如果你不明白@Ajish 的回答（像我一样），我会试着解释一下：

正如Antd 文档所说，您需要将 a 传递FieldData[]给您的form.setFields()方法。就我而言，我只需要更新一个领域，我只用了name，并value从FieldData性能。因此，我的代码是这样的：

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

Name属性是一个NamePath组成：

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

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

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

setFields([{name:[data[0].name[0], data[0].name[1], 'component_pm'],value:5}])
其它你可能感兴趣的问题
上一篇意外标记 <Container> ，reactjs，typescript 下一篇next.js 和 material-ui - 让它们工作