在前端开发中，表单是一个必不可少的组件。redux-form-helper 就是一个在表单处理中非常有用的 npm 包。本教程将详细介绍 redux-form-helper 的使用方法。
redux-form-helper 简介
redux-form-helper 是基于 react-redux 与 redux-form 的一个 npm 包，它对表单数据进行了简化、封装、扩展，从而更容易地处理表单数据。redux-form-helper 可以使用处于 react-redux 组件树内的 store 与 actions，使用户更加轻松地管理表单数据。
安装 redux-form-helper
您可以使用 npm 或 yarn 安装 redux-form-helper：
npm install redux-form-helper
或
yarn add redux-form-helper
使用 redux-form-helper
在使用 redux-form-helper 之前，请确保您已经正确配置了 redux 和 redux-form，这里我们假设您已经熟悉了 redux 与 redux-form 的基础使用方法。这里以一个简单的登录表单为例，演示 redux-form-helper 的使用方法。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------ --------- - ---- -------------
------ - ------------------ - ---- --------
------ - -- ------- ---- ------------
------ - ------------- - ---- --------------------
----- --------- ------- --------- -
----------- - ----- -------- -- -
-- ----
----- ------------------
-- ----
-------------------
-
-------- -
----- - ------------ - - -----------
----- --------- - ---------------------------
------ -
----- ------------------------------------------
-----
------ ------------------------------------
------ --------------- ----------------- ----------- -------------------------- --
------
-----
------ ------------------------------------
------ --------------- ----------------- --------------- -------------------------- --
------
------- ----------------------------
-------
--
-
-
----- --------------- - ------- -- --
-------------- -
-- ------
--------- ---
--------- ---
--
---
----- ------------------ - ---------- -- --
-------- --------------------------- ----------
---
--------- - -----------
----- ------------
--------------
--------- - --------
----------------
------------------
-------------
------ ------- ----------首先，在使用 redux-form-helper 之前，我们需要在表单的组件树中获取隔离子 state 的 store 和 actions，可以使用 getFormHelper 函数实现：
import { getFormHelper } from 'redux-form-helper';
const fieldHelp = getFormHelper('LoginForm');然后，我们需要在 Field 组件中传递一个 {...fieldHelp('字段名')} 对象，以便从隔离子 state 中获取初始化表单值和任何表单错误。
最后值得注意的是，在这种情况下，在提交表单后调用此.props.reset() 来清除表单是必要的。
redux-form-helper API 参考
getFormHelper(formName)
获取表单的帮助信息函数。
- formName - 处于 react-redux 组件树内的所需表单组件的名称。
返回表单的帮助信息函数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609b81e8991b448ded48