当我们在开发复杂的表单时，会遇到表单项之间的嵌套关系，例如一个订单表单中包含收货人信息和商品信息。如果没有一个好用的库，这些嵌套关系需要手动处理，代码量和复杂度都会大大增加。此时，formik-nested 这个 npm 包可以帮助我们解决这个问题。
本文将介绍如何使用 formik-nested 包来优雅地处理表单中的嵌套关系，以示例代码形式呈现。
安装和引入
首先，我们需要安装 formik-nested 包。在终端中执行以下命令即可：
npm install formik-nested
安装完成后，我们在代码中引入它：
import { FieldArray, Field } from 'formik';
import { Input } from 'antd'; // 这里用 antd 的 Input 举例
import { NestedField } from 'formik-nested';基本使用
在 formik 的表单中，如果需要嵌套某个字段，我们可以使用 FieldArray 和 NestedField 来实现。
-- -------------------- ---- -------
----------- ----------------
--- ------- ---- -- -- -
-----
------------------------------ ------ -- -
---- ------------
------------ ---------------------------------
-------- -- ------ ---------- ---
--------------
------------ ----------------------------------
-------- -- ------ ---------- ---
--------------
------- ----------- -- ------------------------------
------
---
------- ----------- -- ------ ----- --- ------ -- ------- ----------------
------
--
-------------在上述代码中，我们使用 FieldArray 来表示一个可被动态添加/删除的产品列表。在列表项中，我们使用 NestedField 来表示每个产品的名称和价格。NestedField 的 name 属性采用了与 formik 相同的语法，以实现嵌套表示。同时，在 NestedField 中，我们将 antd 的 Input 控件作为子元素传入，这样可以直接渲染出一个输入框。
高级使用
除了基本使用之外，formik-nested 还提供了很多方便的功能，如：
按钮组
我们可以使用 FormGroup 来创建一个按钮组，进一步将表单项分类，提高可读性。
<FormGroup name="address">
<NestedField name="province">
{(props) => <Input {...props} />}
</NestedField>
<NestedField name="city">
{(props) => <Input {...props} />}
</NestedField>
</FormGroup>数组表单
使用 ArrayField 来处理数组表单。
-- -------------------- ---- -------
----------- ---------------
------------------ --
--------------------------- ------ -- -
-----------------
-----------
--------------------------------
---------- --
----------------------- ---------- -- -
------------------ ----------------
------------
----------------------------------------------------
--------------- -- ------ ---------- ---
--
------------
---------------------------------------------------
--------------- -- ------ ---------- ---
--
--------------------
--
-
--
--
-
-------------数据转换
使用 transform 使得数据转化更加方便。以下代码演示了将 { a: { b: { c: 'value' } } } 转化为 { abc: 'value' }：
<Transform name="a.b.c" transform={(value) => ({ abc: value })}>
{(props) => <Input {...props} />}
</Transform>使用 subTransform 使得子属性转换更加方便：
<Transform name="a" subTransform={(value) => ({ a: value.b.c })}>
{(props) => <Input {...props} />}
</Transform>总结
如上，使用 formik-nested 可以更加优雅地处理表单中的嵌套关系，进一步提高开发效率和代码重用性，并且使表单结构更加清晰易读。本文从安装和引入入手，详细介绍了 formik-nested 的基本使用和高级使用，希望能够为你带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e35ae