Redux Form 是一个 React 表单库，它可以帮助我们管理表单的状态，简化表单的处理流程。在 Redux Form 7.0 版本中，数据交互方面有了一些新的改进，本文将详细介绍这些改进并提供示例代码。
数据交互
在表单中，我们通常需要与服务器进行数据交互，例如提交表单数据、获取表单数据等。Redux Form 7.0 版本中新增了一些 API，可以方便地进行数据交互。
onSubmit
onSubmit 是 Redux Form 中一个非常重要的 API，它可以在表单提交时触发。我们可以在 onSubmit 中进行数据交互操作，例如提交表单数据到服务器。
-- -------------------- ---- -------
------ - ------ --------- - ---- ------------
----- ------ - -------- -- -
-- ----------
-------------------
-
----- ------ - ------- -- -
----- - ------------ - - -----
------ -
----- --------------------------------
------ --------------- ----------------- ----------- --
------ --------------- ----------------- --------------- --
------- -------------------------
-------
-
-
------ ------- -----------
----- --------
----------上面的代码中，我们定义了一个 submit 函数，它会在表单提交时被调用。我们可以在这个函数中调用接口，将表单数据提交到服务器。
initialValues
initialValues 可以用来设置表单的默认值。在 Redux Form 7.0 版本中，我们可以使用 initialValues 来获取服务器端的表单数据。
-- -------------------- ---- -------
------ - ------ --------- - ---- ------------
----- ------ - ------- -- -
----- - ------------- ------------- - - -----
------ -
----- ------------------------
------ --------------- ----------------- ----------- --
------ --------------- ----------------- --------------- --
------- -------------------------
-------
-
-
------ ------- -----------
----- ---------
-------------- -
--------- --------
--------- --------
-
----------上面的代码中，我们通过 initialValues 设置了表单的默认值。如果我们想要从服务器端获取表单数据，可以在 reduxForm 中传入一个函数，这个函数会在组件渲染时被调用。
-- -------------------- ---- -------
------ - ------ --------- - ---- ------------
----- ---------------- - -- -- -
-- ----------
------ -
--------- --------
--------- --------
-
-
----- ------ - ------- -- -
----- - ------------- ------------- - - -----
------ -
----- ------------------------
------ --------------- ----------------- ----------- --
------ --------------- ----------------- --------------- --
------- -------------------------
-------
-
-
------ ------- -----------
----- ---------
-------------- ----------------
----------reset
reset 可以用来重置表单的状态。在 Redux Form 7.0 版本中，我们可以通过 reset 来清空表单数据。
-- -------------------- ---- -------
------ - ------ --------- - ---- ------------
----- ------ - -------- --------- ------ -- -
-- ----------
-- ------
-------------
-
----- ------ - ------- -- -
----- - ------------ - - -----
------ -
----- --------------------------------
------ --------------- ----------------- ----------- --
------ --------------- ----------------- --------------- --
------- -------------------------
-------
-
-
------ ------- -----------
----- --------
----------上面的代码中，我们在 submit 函数中调用了 reset，这样可以在表单提交后清空表单数据。
总结
Redux Form 7.0 版本中，数据交互方面有了一些新的改进。我们可以通过 onSubmit 在表单提交时进行数据交互操作，通过 initialValues 获取服务器端的表单数据，通过 reset 清空表单数据。这些 API 可以帮助我们更方便地处理表单的数据交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bf6b12add4f0e0ff8f906f