Antd表单FormList

Antd表单FormList

❓：初始化值一两条数据
💡：直接通过form.setFieldsValue设置

❓：在list中怎么获取当前表单组件对应的数据
💡：通过form.getFieldValue

• 🔴 1、getFieldValue 用法

  • 🟢 1.1、获取普通字段的值：

  const username = form.getFieldValue('username');
  

  在这里，username是一个普通的字段（不是嵌套的），该字段的值直接被检索。

  • 🟢 1.2、获取嵌套字段的值：

   const street = form.getFieldValue(['address', 'street']);
  

  如果你的表单是嵌套的对象（例如，地址是一个包含街道、城市、邮编等属性的对象），你需要使用数组作为getFieldValue的参数，数组中的每个元素代表访问嵌套对象路径的一级。

  • 🟢 1.3、获取Form.List中的字段值：

  const userFirstName = form.getFieldValue(['users', field.name, 'firstName']);
  

  当你使用Form.List组件并希望获取其中某个列表项的特定字段时，你同样需要使用数组形式的参数。这里'users'是Form.List的name属性值，field.name是当前列表项的索引（通常由Form.List回调提供），而'firstName'是我们想要获取其值的特定字段名称。

  参数field.name提供了数组中当前项的索引，这对于在Form.List中定位数组项至关重要。需要注意的是，当使用这样的调用方式时，确保field.name是正确的索引，否则可能会检索到错误的值或是undefined。