NPM 包 Redux-SubmitForm-OnValidation 使用教程

阅读时长 5 分钟读完

前言

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 具有以下功能:

  • 支持表单验证(验证规则可以自定义)
  • 支持动态添加、修改和删除表单字段
  • 支持重置表单数据

我们只需要使用 submitFormresetForm 两个 action 对 Redux store 进行更新即可实现这些功能。

处理表单数据

submitForm action 在表单数据验证通过时被触发,并且它将在 Redux store 中更新表单数据。以下是一个处理表单数据的示例代码:

-- -------------------- ---- -------
------ - ---------- - ---- --------------------------------

----- ---------- - -
  --------- -----------
  --------- --------------
  ------ ----------------------
--

---------------------------------------

重置表单数据

resetForm action 将在清空表单数据时触发。以下是一个重置表单数据的示例代码:

结论

这篇文章向读者介绍了 Redux-SubmitForm-OnValidation 技术,并提供了详细的使用教程和示例代码。现在您已经理解了如何使用 Redux 和 Redux middleware 处理表单数据和验证表单数据,这将使您的前端开发更加便捷。尽情享受您的编码过程吧!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c73

纠错
反馈