前言
Redux-SubmitForm-OnValidation 是一个非常有用的 NPM 包，它可以帮助我们在开发 React 应用时更方便地处理表单数据和验证表单数据。本篇文章将带您深入了解该 NPM 包并提供详细的使用教程及示例代码。
简介
Redux-SubmitForm-OnValidation 是一个可使用 Redux 的 middleware 进行表单数据处理和表单数据验证的 NPM 包。该包可以用于处理任何类型的表单数据，同时可以自定义表单数据的规则和验证方式。
使用方法
1. 安装
在项目目录下，输入以下指令安装 Redux-SubmitForm-OnValidation：
--- ------- ------ -----------------------------
2. 引入
在你的 Redux store 中，创建一个新的 middleware 并将其添加到 applyMiddleware 中，如下例所示:
------ - ------------ --------------- - ---- -------- ------ - -------------------------- - ---- -------------------------------- ----- -------------------- - ----------------------------- ----- ----- - ------------ ------------ ------------------------------------- --
3. 配置
现在，我们需要在我们的 Redux store 中配置表单数据信息和验证规则。为了实现这一点，需要使用本包中的两种不同类型的 action：
表单信息（form data）
创建一个名为 setFormDataActionCreator 的 action creator，并将其添加到 Redux store。
------ - ------------------------ - ---- -------------------------------- ----- -------- - - --------- --- --------- --- ------ --- -- ----- ----------------- - ----------------------------------- ----------------------------------
setFormDataActionCreator 接受一个表单数据对象作为参数，并返回一个 Redux action。
验证信息（validation data）
创建一个名为 setValidationRulesActionCreator 的 action creator，并将其添加到 Redux store。
------ - ------------------------------- - ---- --------------------------------
----- --------------- - -
--------- -
--------- -----
---------- --
---------- ---
--
--------- -
--------- -----
---------- --
--
------ -
--------- -----
------ -----
--
--
----- ------------------------ - --------------------------------
---------------
--
-----------------------------------------setValidationRulesActionCreator 接受一个验证规则对象作为参数，并返回一个 Redux action。
4. 处理和验证表单数据
现在，我们可以使用 submitFormMiddleware 对表单数据进行处理和验证。submitFormMiddleware 具有以下功能：
- 支持表单验证（验证规则可以自定义）
- 支持动态添加、修改和删除表单字段
- 支持重置表单数据
我们只需要使用 submitForm 和 resetForm 两个 action 对 Redux store 进行更新即可实现这些功能。
处理表单数据
submitForm action 在表单数据验证通过时被触发，并且它将在 Redux store 中更新表单数据。以下是一个处理表单数据的示例代码：
------ - ---------- - ---- -------------------------------- ----- ---------- - - --------- ----------- --------- -------------- ------ ---------------------- -- ---------------------------------------
重置表单数据
resetForm action 将在清空表单数据时触发。以下是一个重置表单数据的示例代码：
------ - --------- - ---- -------------------------------- ----------------------------
结论
这篇文章向读者介绍了 Redux-SubmitForm-OnValidation 技术，并提供了详细的使用教程和示例代码。现在您已经理解了如何使用 Redux 和 Redux middleware 处理表单数据和验证表单数据，这将使您的前端开发更加便捷。尽情享受您的编码过程吧！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700ce361a36e0bce8c73