npm 包 @grubstarstar/react-redux-form 使用教程

阅读时长 8 分钟读完

在前端开发过程中,处理表单是经常涉及的工作。为了方便表单使用,许多前端框架都提供了表单组件。React 也不例外,@grubstarstar/react-redux-form 是一个可以帮助 React 应用更轻易地管理表单的 npm 包。本文将介绍这个包的使用教程和示例代码。

安装

这个 npm 包可以通过 npm 或 yarn 安装。在终端中输入以下命令:

开始使用

在安装完包之后,你需要通过以下步骤来使用这个 npm 包:

  1. 安装 redux-form,这是 @grubstarstar/react-redux-form 的一个父级包,提供了表单处理的实现。

  2. 在你的文件中导入 Reducer 和 redux-form 提供的 Provider 和 combineReducer。

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

在这个例子中,我们创建了一个 Redux store,将这个 store 传递给 Provider 组件。之后我们将会在 MyFormComponent 中使用这个 store。

你还需要使用 reducers 来处理表单数据。当我们使用 Redux 来处理表单时,我们需要为表单创建一个 reducer。这个 reducer 会将表单的当前状态作为一个对象返回。

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

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

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

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

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

在这个例子中,我们使用了 Field 组件来渲染表单域组件,和将 labeltype,和 name 属性传递给子组件来设置表单域属性,通过 reduxForm 高阶组件将 MyForm 组件包装,这会绑定表单数据到 Redux store 中。

示例代码

实际使用 @grubstarstar/react-redux-form 的例子代码如下:

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

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

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

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

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

在这个例子中,我们收集了用户的姓名和电子邮件信息。validate 函数用来验证输入值是否符合用户需求,在提交表单之前进行验证。需要验证的属性在 validate中设置。如果验证失败,这个输入值将会被放置在错误对象中,可以在 reactstrap 组件中用来渲染错误消息。

结论

@grubstarstar/react-redux-form 是一个可以帮助 React 应用更轻易的管理表单的 npm 包。在安装完这个包之后,你可以使用它来帮助你处理表单数据。在这篇文章中,我们介绍了如何使用这个 npm 包,并提供了一个完整代码示例。希望这篇文章对你有所帮助。

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

纠错
反馈