npm 包 @omaiboroda/redux-form 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言：Redux-Form 是一个处理 React 表单状态的第三方库。它使用了 React 和 Redux 的核心概念并将其应用到表单状态管理中。@omaiboroda/redux-form 是一个 npm 包，提供了一种更加简单的使用方法，下面是详细的教程。

环境准备

在开始之前，需确保本地已经安装了以下环境：

Node.js（包括 npm 或 yarn）

安装 @omaiboroda/redux-form

若要在 React 应用中使用 @omaiboroda/redux-form，需先安装它。可以使用 npm 或 yarn 安装它。

使用 npm 安装

npm install @omaiboroda/redux-form --save

使用 yarn 安装

yarn add @omaiboroda/redux-form

安装完成后，还需安装 redux 和 react-redux，因为 redux-form 是基于 redux 和 react-redux 的。

npm install redux react-redux --save

或使用 yarn 安装

yarn add redux react-redux

使用 @omaiboroda/redux-form

下面是使用 @omaiboroda/redux-form 的简单示例。

在 React 应用中引入模块

import React from 'react';
import { Field, reduxForm } from '@omaiboroda/redux-form';

创建一个 React 组件

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

在组件中使用装饰器函数

MyForm = reduxForm({
  form: 'myForm'
})(MyForm);

最后将组件导出并渲染它

export default MyForm;

详解 Field 组件

Field 翻译过来是“字段”的意思，它相当于表单元素（如 input、select、textarea）的容器，用于在表单状态管理中与 Redux store 进行交互。

Field 的 props

Field 组件接受以下 props：

name（必选）：表单元素的名称。它是唯一的标识符，用于将表单元素的值从 store 中提取出来并在渲染时将值填入表单元素。在第一个示例中，我们使用了 name 属性：

<Field name="firstName" component="input" type="text" />

component（必选）：指定 Field 组件渲染时所使用的表单元素组件，如 input、select 或 textarea。在第一个示例中，我们使用了 input 组件：

<Field name="firstName" component="input" type="text" />

type：指定表单元素的类型，如 text、password、email 等。在第一个示例中，我们使用了 type="text"：

<Field name="firstName" component="input" type="text" />

还有其他 props，不过以上是最常用的属性。

详解 reduxForm

reduxForm 是一个高阶组件，用于将表单连接到 Redux store，并将表单数据存储在 store 中。与 Field 类似，reduxForm 也接受一些配置参数以处理表单。

reduxForm 的参数

reduxForm 函数接受一些参数，下面是这些参数的详解。

form（必选）：form 参数是唯一的标识符，用于在 store 中描述表单。与 name 属性类似，它是用于在 store 中创建用于存储表单数据的命名空间的字符串。

MyForm = reduxForm({
  form: 'myForm'
})(MyForm);

initialValues：initialValues 参数为表单元素设置初始值。在第一个示例中，我们初始化的值为空：

MyForm = reduxForm({
  form: 'myForm',
  initialValues: {
    firstName: '',
    lastName: ''
  }
})(MyForm);

这样可在表单元素中设置默认值，例如：

<Field name="firstName" component="input" type="text" defaultValue="John" />

onSubmit（必选）：指定表单提交时的处理函数。 onSubmit 函数接受提交的数据作为参数，并且此函数可以 dispatch 到 store。
validate：validate 函数用于在提交表单之前验证表单数据。如果表单数据无效，则不能提交表单。它返回的是一个对象，该对象包含表单元素与错误信息的映射关系。

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

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

warn：warn 函数用于在表单提交之前警告表单数据。与 validate 函数类似，它返回的也是一个包含表单元素与警告信息的映射关系的对象。

参考文献

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005668181e8991b448e2a73