前言
在开发 Web 应用时，表单是最常见的交互方式之一。而 Redux 作为目前较为流行的前端框架，也有着强大的状态管理能力。但是，Redux 的学习曲线较为陡峭，在实际开发中，对于表单的处理可能存在一定的繁琐和重复。为了解决这个问题，开发者们创造了很多 Redux 的表单管理库。其中，本文将介绍一款名为 redux-submitform-onchange 的库。它的的基本思路是将表单的值放在 Redux 的 state 中，当表单改变时，就会自动将表单的值提交到 Redux 中。这样一来，这个库就可以在改变内容时，定时将表单内容放入 store 中，比较适用于多表单浏览应用的场景。
安装
首先，您需要在项目根目录中运行以下命令安装该npm包：
npm install --save redux-submitform-onchange
使用
在完成安装之后，在你的 React App 中，你需要使用 Redux 进行状态管理并设置表单。然后，在你的表单组件之外，你需要执行以下操作来设置 redux-submitform-onchange：
import { createStore } from 'redux'
import { submitReducer } from 'redux-submitform-onchange'
const store = createStore(submitReducer)您现在需要将回调添加到 onChange 事件中，以触发该库的功能。以下是一个使用该库的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ------- - ---- -------------
------ - ------------------ - ---- -------
------ - ------------- - ---- -----------------------------------
----- ---- - -- -------------- -------------- -- -- -
----- ------- --------- - ------------
----- ------------ - --- -- -
------------------
------------------
-
----- ----------------- - -- ------- - ----- - -- -- -
-------------------- -------
-- ------ ----------------- -----------
---------------
-
------ -
----- ------------------------
------ ----------- ------------- ---------------------------- --
------- -----------------------------
------------ ------ --------------------
-------
-
-
----- --------------- - -- ---------- -- -- --
--------------- ----------------
--
----- ------------------ - ---------- -- -
-------------------- ------------- -- ---------
-
------------------------ -------------------------在该示例中，我们使用了一个新的 action setInputValue，而该动作不在默认框架中。请确保将它添加到自己的Redux项目中。
import { SET_INPUT_VALUE } from './actionTypes'
export const setInputValue = (value, formName) => ({
type: SET_INPUT_VALUE,
payload: { value, formName },
})本示例中，我们使用 handleSubmit 方法并预先阻止默认行为。但是因为我们已经把所有信息存储在submitform状态对象中，所以此时我们不需要这个方法作为表单提交事件。
示例代码已经展示了 redux-submitform-onchange 库的主要用途，能够帮助您减少表单的重复上下文。在您阅读本文并参照示例代码后，相信您能够掌握更多该库的细节并在你的 React App 中开始拥有表单管理的好处。
总结
本文介绍了 redux-submitform-onchange npm包，它可帮助您减少表单管理上的重复性工作。这个库简单易用，只需在您的文档中按照以上示例即可完成您的表单管理之路。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c72