介绍
@ianchadwick/react-forms 是一款适用于 React.js 应用程序的开源表单库。使用该库可以轻松构建符合业务需求的表单，包括验证和提交等常用功能。
安装
通过 npm 安装：
npm install @ianchadwick/react-forms
使用
表单组件
使用 @ianchadwick/react-forms 的第一步是引入表单组件：
import { Form } from '@ianchadwick/react-forms';然后在 render 方法中，将表单组件添加到 DOM 中：
<Form onSubmit={handleSubmit}>
{/* 表单元素 */}
</Form>表单元素
表单组件中的 form 元素需要包含所有表单元素，例如 input，select 和 textarea 等。可以使用 Form.Input 和 Form.Select 等函数创建相应的表单元素：
-- -------------------- ---- -------
----- ------------------------
--- ----- ---------- ------ ------- ------ -- -- -
--
-----------
------ ------------------------------
------ ------------- --------------- ----------- --
------------
-----------
------ -----------------------------
------ ------------- --------------- --------------- --
------------
-----------
------ ---------------------------
------- ----------- --------------
------- -----------------------
------- -------------------------
---------
------------
------- -------------------------
---
--
-------在上面的示例中，我们使用 Form.Input 和 Form.Select 函数来创建 input 和 select 元素。还可以使用 Form.Textarea 和 Form.Checkbox 函数创建 textarea 和 checkbox 元素。
表单验证
在表单元素中，我们可以使用预定义的验证规则来验证用户输入。例如，可以使用 required 验证规则确保用户输入了表单元素的值：
-- -------------------- ---- -------
----- ------------------------
--- ----- ---------- ------ ------ -- -- -
--
-----------
------ ------------------------------
------
-------------
---------------
-----------
--------
-------------
--
------------
------- -------------------------
---
--
-------在上面的示例中，我们将表单元素的 required 属性设置为 true，表示该元素是必填项。还可以使用 minLength 和 maxLength 属性指定输入内容的最小长度和最大长度。
表单提交
在表单内部，可以使用 Form.Button 元素来创建提交按钮，通过 onSubmit 属性来监听表单提交事件：
-- -------------------- ---- -------
----- ------------------------
--- ----- ---------- ------ ------ -- -- -
--
-----------
------ ------------------------------
------ ------------- --------------- ----------- -------- --
------------
-----------
------ -----------------------------
------ ------------- --------------- --------------- -------- --
------------
------- -------------------------
---
--
-------在 handleSubmit 中，可以使用 event.preventDefault() 和 event.target 等方法获取表单的值并提交表单。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------------------
-------- ----- -
----- ------------ - ------- -- -
-----------------------
----- -------- - -------------------------------------
----- -------- - -------------------------------------
--------------------- ----------
--
------ -
----- ------------------------
--- ----- ---------- ------ ------- ------ -- -- -
--
-----------
------ ------------------------------
------
-------------
---------------
-----------
--------
-------------
--
------------
-----------
------ -----------------------------
------
-------------
---------------
---------------
--------
-------------
--
------------
-----------
------ ---------------------------
------- ----------- --------------
------- -----------------------
------- -------------------------
---------
------------
------- -------------------------
---
--
-------
--
-
------ ------- ----总结
@ianchadwick/react-forms 是一款非常实用的表单库，使用起来非常方便。在开发 React.js 应用程序时，可以使用它来快速构建表单，减少开发成本。需要注意的是，该库仅用于前端，不保证数据安全性，需要在服务端进行二次验证和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc1967216659e2441dc