React-final-form-arrays 是一个你在 React 项目中用来处理表单的 npm 包，它可以帮助你轻松地处理表单中的数组内容。
安装和配置
使用 npm 包管理器可以轻松地安装 react-final-form-arrays：
npm install react-final-form-arrays
在你的组件中引入并使用它：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ---------- - ---- -------------------------
----- ------ - -- -- -
------
----------- --------------------
--- ------ -- --
----------------- ------ -- -
---- -----------
------ ------------------------ ----------------- --
------- ------------- ----------- -- ----------------------
------
---------
------
--
-
-------------
-------
-上述代码中，我们使用了 FieldArray 组件来处理表单中的数组内容。我们把这个数组命名为“myFieldArray”，然后在 fields.map 中遍历这个数组，并使用 Field 组件来处理每一个数组项中的表单输入项。
添加和删除数组项
React-final-form-arrays 中有很多函数和工具可以帮助你管理表单中的数组项。下面是一些常见的使用示例：
添加一个数组项
要添加一个数组项，你可以使用 push 函数。在你的组件中，你可以添加一个按钮来让用户通过点击实现添加一个新的数组项。
<button type="button" onClick={() => fields.push({})}>
Add Item
</button>移除一个数组项
要移除一个数组项，你可以使用 remove 函数。在你的表单项组件中添加一个“删除”按钮，让用户点击它来移除这个数组项。
<button type="button" onClick={() => fields.remove(index)}>
Remove
</button>对数组项的校验
React-final-form-arrays 还提供了内置的校验功能，可以让你轻松地对表单中的数组项进行校验。
校验数组项中的一个输入项
你可以使用最基础的方式，对数组中的一个输入项进行校验。在你的组件中，你可以使用 Field 组件对这个输入项进行校验：
<Field
name={`${name}.myInput`}
component="input"
validate={value => {
return !value ? '必填项' : undefined
}}
/>上述代码中，我们定义了一个名为“myInput”的输入项，然后使用 validate 函数来校验这个输入项的内容。
校验整个数组项
你也可以使用 validate 函数来校验整个数组项。你可以在 FieldArray 组件中定义一个 validate 函数，然后在 validate 函数中对整个数组项进行校验。
-- -------------------- ---- -------
-----------
-------------------
--------------- -- -
----- ------ - --
------------------ -- -
-- --------------- -
-------------
-------- -----
--
-
--
------ ------------- - ------ - ---------
--
-
--- ------ -- --
----------------- ------ -- -
---- -----------
------ ------------------------ ----------------- --
------- ------------- ----------- -- ----------------------
------
---------
------
--
-
-------------上述代码中，我们在 FieldArray 组件中定义了一个 validate 函数，并在其中对整个数组项进行了校验。我们使用 forEach 函数遍历整个数组项，然后校验每一个输入项是否符合要求。如果校验不通过，我们就返回一个包含错误信息的数组，否则我们就返回一个 undefined。
总结
通过本文，我们学习了如何使用 react-final-form-arrays 这个 npm 包来处理表单中的数组内容。我们学习了如何添加和移除数组项，以及如何对数组项中的输入内容进行校验。通过这些知识，我们可以轻松地处理表单中复杂的数组内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa43b5cbfe1ea0610400