React-Redux-Simple-Form 是一个用于管理 React 表单状态的 npm 包。它能够快速简便的创建表单，并且通过 Redux 的状态管理能够方便地处理表单的各种操作和验证，提高了前端开发效率和表单性能。
安装和使用
要使用 React-Redux-Simple-Form ，您需要安装 React 和 Redux 以及其相关的 npm 包。您可以使用以下命令来安装：
--- ------- -----------------------
在您的 React 应用程序中，您需要使用以下代码导入 React-Redux-Simple-Form ：
------ - ----------- ----- - ---- --------------------------
使用以下代码创建一个简单的表单：
----------- ---------------- ----- --- ------ --- --------- --- ---------------- -- --- ------ ----------- ----------- ------------ -------- -- ------ ------------ ------------ ------------- -------- -- ------ --------------- --------------- ---------------- -------- -- ------ ---------------------- --------------- -------------- --------- -------- -- ------- ----------------------------- -------------
该表单定义了四个字段: name,email,password,confirmPassword,以及一个 submit 按钮，其中 Field 组件为表单元素创建输入字段，也可以用于输入类型为 radio,select,textarea 等表单元素。
使用 initialValues 属性为表单字段提供初始值。如果不提供 initialValues 属性，则表单将没有默认值.
表单验证
React-Redux-Simple-Form 提供丰富的表单验证方法。您可以使用 Field 组件指定要验证的表单元素，并定义验证规则。例如：
------ ------------ ----------- ------------- -------- --------------- -- -------------- - ---- - ------- ----- - ----- ----- --------- --
在此示例中，使用内置的 required 属性和自定义 validate 函数。如果验证失败，该函数需要返回一个字符串，该字符串更新验证错误并将其显示在表单上。
同时，组件还支持 isEqual，isInt，isLength 和其他许多验证器函数，这些函数都是从 validator.js 库中获得的。
表单状态管理
与其他 React-Redux 库一样，React-Redux-Simple-Form 也依赖于 Redux 存储数据。您可以使用任何 Redux 存储创建表单。将 simpleFormReducer 添加到 Redux 存储，就可以将其用作表单状态的处理程序。
使用以下示例代码将 SimpleForm 组件与 Redux 存储连接起来：
------ - ------------ --------------- - ---- -------- ------ - ------- -- ----------- - ---- -------------------------- ----- ----------- - ----------------- ----- ----------- --- ----- ----- - -------------------------
要在组件中访问表单状态，请使用 useFormState 钩子和 useFormSubmit 钩子。例如，以下代码片段处理提交表单:
------ - ------------- ------------- - ---- --------------------------
----- ------ - -- -- -
----- - ------- -------- ------- - - ---------------
----- ---------- - ----------------
----- ------------ - ----- -- -
-----------------------
-- --------- -
------------------------- --------
-
--
------ -
----- ------------------------
------ ------------ ------------ ------------- -------- --
------- -----------------------------
-------
--
-在此示例中，使用 useFormState 钩子获取表单状态，使用 useFormSubmit 钩子处理表单提交，当表单有效时限制提交.
总结
React-Redux-Simple-Form 可以帮助你更快的构建验证器表单，同时也提高了前端的开发效率和表单性能。通过本教程的学习，你将学会如何快速构建具有验证器的表单，并能够轻松的与 Redux 进行集成和管理表单状态.
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f79238a385564ab698f