介绍
rrf 是一个 React Redux Form 库的简写，它提供了一套方便易用的 API 来构建表单。
rrf 针对 Redux 做了一些封装，使得表单与 Redux 的结合变得容易。
虽然 Redux Form 已经很成熟了，但 rrf 的出现仍然有其必要性。因为 rrf 更加轻量，更加简单易用。
安装
通过 npm 安装:
--- ------- ---
或者通过 yarn 安装：
---- --- ---
示例
让我们从一个简单的示例入手。假设我们正在构建一个表单，在表单中有一个用户名和密码。我们首先需要安装必要的库。
--- ------- ----- --------- ----- ----------- ----------- ---------- ------
接着，我们创建 src/App.js 文件，并编写以下代码：
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------------ ---------------- --------------- - ---- --------
------ - ------- -- ----------- - ---- -------------
------ ------------
-- --- -------
----- ----------- - -----------------
----- ------------
---
-- ---
----- ---------- - ---
-- -----
----- ----- - ------------------------ --------------------------------
-- --- --
-------- ----- -
------ -
--------- --------------
---- ----------------
------
------ ------------------------------------
------ ------------- ----------- --
--- --
------ ------------------------------------
------ ------------- --------------- --
--- --
------- -----------------------------
-------
------
-----------
--
-
------ ------- ----我们添加了必要的 reducer 和中间件，创建了一个 store，还创建了一个 App 组件，渲染了一个简单的表单。
但是，这个表单并没有与 Redux 关联，也无法获取用户输入。让我们同时添加 rrf，并将表单绑定到 store。
首先，我们需要导入一些新的库：
--- ------- ----------------------- ------
接着，在 src/App.js 中导入 Control 组件，它是 react-inputs-validation 库中的一个有用组件。Control 组件支持表单验证。
------ ------ - -------- - ---- --------
------ - -------- - ---- --------------
------ - ------------ ---------------- --------------- - ---- --------
------ - ------- -- ----------- - ---- -------------
------ --------------- ---- --------------------------
------ --------------------------------------------------------------
-- --- -------
----- ----------- - -----------------
----- ------------
---
-- ---
----- ---------- - ---
-- -----
----- ----- - ------------------------ --------------------------------
-- --- --
-------- ----- -
----- --------------- ----------------- - -------------
----- --------------- ----------------- - -------------
----- ---------- - --- -- -
-------------------
----------------------------- -------------------
---------------------
---------------------
--
------ -
--------- --------------
-----------------
---- ----------------
----- ----------------------
------ ------------------------------------
--------
-------------
---------------
---------------------
------------- -- ----------------------------------------
---------------------------------
--
--- --
------ ------------------------------------
--------
-------------
---------------
---------------
---------------------
------------- -- ----------------------------------------
-------------------
--
--- --
------- -----------------------------
-------
------
------------------
-----------
--
-
------ ------- ----Control 组件作为 rrf 表单组件的代替品，用于处理具体的表单中的数据。我们将 Control 组件传入浏览器中，通过 props 传给表单的输入框。
我们还为 Control 添加了 validate 属性，用于在 submit 时验证用户输入。在这里我们使用了 alpha_numeric 来验证用户名是否仅由字母和数字组成。
总结
使用 rrf 构建表单非常容易，只需要几行代码就可以完成。与 Redux Form 相比，使用 rrf 更加轻量，简单易用。
当我们需要构建一个表单时，rrf 为我们提供了一套简单易懂的 API，可以大大减少我们的工作量。
关于 rrf 的更多用法和 API 可以参考官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557e281e8991b448d4f07