简介
React-responsive-form 是一个用于React的表单生成工具，可帮助前端开发者快速构建响应式表单。该工具提供了一系列的表单组件和相应的验证规则，并且使用简单方便，完全可以替代手动地搭建表单。
安装
执行以下命令，即可安装 react-responsive-form：
npm install react-responsive-form
使用
1. 引入组件
在需要使用组件的页面中引入 react-responsive-form 的组件：
import {Form, Input, TextArea, Select, SubmitButton, ResetButton} from 'react-responsive-form';2. 构建表单
在页面中构建表单，首先需要定义表单组件，然后用 Form 组件将表单组件包裹起来；
下面这个例子展示了一个简单表单的构建过程：
<Form onSubmit={this.onSubmit}>
<Input name="username" type="text" placeholder="请输入用户名" />
<Input name="password" type="password" placeholder="请输入密码" />
<SubmitButton>登录</SubmitButton>
<ResetButton>取消</ResetButton>
</Form>3. 添加验证规则
React-responsive-form 提供了一系列的验证规则，并且可自定义验证规则。 示例代码如下所示：
-- -------------------- ---- -------
----- -------------------------
------
---------------
-----------
--------------------
-------- --------- ---- --
--------------- --------- -------- --
--
------
---------------
---------------
-------------------
--------
--------- -----
---------- --
---------- ---
-------- --------------------------------------------------
--
---------------
--------- --------
---------- -------------
---------- --------------
-------- -------------------------
--
--
-------------------------------
-----------------------------
-------4. 处理表单提交
React-responsive-form 提供了一个事件处理函数 onSubmit，在提交表单时进行调用。这个函数接收一个参数 formData，在这里可以对表单数据进行处理和提交。
下面是一个表单提交的处理函数示例代码：
onSubmit = formData => {
// 处理表单数据并提交
}总结
React-responsive-form 是一个非常实用的表单生成工具，使用简单方便，完全可以替代手动搭建表单。在开发响应式页面时，使用 react-responsive-form 可以快速构建具有良好交互体验的表单组件，大大提升了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe881e8991b448dd8cf