用于高效创建表单的顶级 React 表单库
介绍
结论
介绍
作为前端开发人员，表单在我们的日常工作中扮演着至关重要的角色。与其每次都从头开始编写表单，不如了解各种可用的库来简化表单构建过程。
在本文中，我们将探讨一些顶级的 React 表单库，它们可以帮助我们轻松创建高效且用户友好的表单。
1. SurveyJS React 表单库
SurveyJS React 表单库是一个用于 React 应用程序的工具，它可以帮助用户在客户端创建动态表单。它使用 JSON 对象来定义表单的结构和行为。
它是流行的开源表单库之一，在GitHub上有 3.9k 个 star，在npm上有 17.4k 次用户下载。
特征：
- JavaScript 应用程序的动态表单
- 内置 20 多种题型，并支持自定义题型
- 内置主题和 CSS 自定义
- 答案验证
- TypeScript 支持
- 与任何后端框架集成（包括 PHP、NodeJS 和 ASP.NET 的示例）
- 兼容任何服务器+数据库组合；集成第三方组件
如何使用
以下是在 React 应用程序中添加 React 调查表单的步骤：
这将生成类似这样的形式：
import { useCallback } from "react";
import "survey-core/defaultV2.min.css";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
const surveyJson = {
elements: [
{
name: "FirstName",
title: "Enter your first name:",
type: "text",
},
{
name: "LastName",
title: "Enter your last name:",
type: "text",
},
],
};
function App() {
const survey = new Model(surveyJson);
survey.focusFirstQuestionAutomatic = false;
const alertResults = useCallback((sender) => {
const results = JSON.stringify(sender.data);
alert(results);
}, []);
survey.onComplete.add(alertResults);
return <Survey model={survey} />;
}
export default App;
2. React Hook 表单
React Hook Form——高性能、灵活且可扩展的表单，并带有易于使用的验证功能。它是最受欢迎的表单库之一，在GitHub上拥有 33.5k 个 star，在npm上拥有 310 万次用户下载。
特征：
- 性能：减少重新渲染次数，减少验证计算，加快挂载速度。
- 超轻量级：包大小至关重要。React Hook Form 是一个没有任何依赖项的超小型库。
- HTML 标准：支持原生 HTML 表单验证
- 易于采用：无需其他依赖项即可轻松采用。
- 支持 Yup、Zod、AJV、Superstruct、Joi 等
安装方法：
npm i react-hook-form
使用方法：
import { useForm } from 'react-hook-form';
function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input {...register('firstName')} />
<input {...register('lastName', { required: true })} />
{errors.lastName && <p>Last name is required.</p>}
<input {...register('age', { pattern: /\d+/ })} />
{errors.age && <p>Please enter number for age.</p>}
<input type="submit" />
</form>
);
}
上面的代码是在 React 组件中使用useForm该库中的 hook的示例。react-hook-form
该useForm钩子用于管理表单状态和验证。
在这个示例中，该register函数用于注册表单中的输入字段，并返回每个输入字段所需的属性。该handleSubmit函数被传递给onSubmit表单的属性，并负责处理表单提交。
formState返回的对象包含useForm表单的当前状态，包括验证过程中检测到的任何错误。
该示例定义了一个包含三个输入字段的表单：名字、姓氏和年龄。姓氏为必填项，年龄必须为数字。
如果用户将姓氏字段留空或在年龄字段中输入非数字值，则会显示错误消息。
表单提交后，该handleSubmit函数会将表单数据记录到控制台。
3. 福米克
Formik使我们能够轻松构建复杂的表单。它也是 React 和 React Native 中最受欢迎的开源表单库之一。它在GitHub上拥有 3.2 万颗星，在npm上拥有240 万次用户下载。
特征：
- 声明式： Formik 处理重复且烦人的事情——跟踪值/错误/访问过的字段、协调验证和处理提交。
- 直观易用： Formik 让调试、测试和分析表单变得轻而易举，因为它始终在 React 核心框架内运行，避免使用任何魔法。
- 易于采用： Formik 不使用 Redux 或 MobX 等外部状态管理库。
安装方法：
npm i formik
使用方法：
// Render Prop
import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
const Basic = () => (
<div>
<h1>Any place in your app!</h1>
<Formik
initialValues={{ email: '', password: '' }}
validate={values => {
const errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = 'Invalid email address';
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="email" name="email" />
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</div>
);
export default Basic;
上面的使用示例定义了一个组件，该组件渲染一个包含电子邮件和密码输入框以及提交按钮的表单。Formik
组件封装了该表单，并提供了用于处理表单状态、验证和提交的功能。
该initialValues属性定义了表单输入的初始值，该validate函数用于表单验证。如果检测到任何错误，则会将其作为对象返回。
该onSubmit函数在表单提交时调用，可用于执行任何必要的操作，例如向服务器发送数据或更新应用程序状态。
Formik 组件接收一个渲染属性，用于定义表单字段和错误消息。该Field组件用于定义表单输入字段，并ErrorMessage用于显示任何验证错误。
最后，表单提交时提交按钮会被禁用，以防止重复提交。
这只是 Formik 如何在 React 应用中使用来管理具有复杂验证和提交逻辑的表单的一个示例。
React Hook 表单与 Formik 的比较
| React Hook 表单 | 福米克 | |
|---|---|---|
| 成分 | 不受控制与受控 | 受控 |
| API | 钩子 | 组件 + 挂钩 |
| 包装尺寸 | 小的react-hook-form@7.27.0**8.5KB** |
中等的formik@2.1.4**15KB** |
| 验证 | 内置Yup、Zod、Joi、Superstruct，并允许自定义验证。 | 自定义或Yup |
| 学习曲线 | 低至中等 | 中等的 |
4. rc-field-form
rc-field-form - React Performance First Form Component（React 性能优先表单组件）。它在GitHub上有 783 个 star，在npm上有 885k 次用户下载。
特征：
- 支持 React.js 甚至 React Native
- 使用异步验证器验证字段
安装方法：
npm i rc-field-form
使用方法：
import Form, { Field } from 'rc-field-form';
const Input = ({ value = "", ...props }) => <input value={value} {...props} />;
const Demo = () => {
return (
<Form
onFinish={(values) => {
console.log("Finish:", values);
}}
>
<Field name="username">
<Input placeholder="Username" />
</Field>
<Field name="password">
<Input placeholder="Password" />
</Field>
<button>Submit</button>
</Form>
);
};
export default Demo;
上面的使用示例定义了一个名为 `<form>` 的组件Demo，该组件渲染一个包含用户名和密码两个输入字段的表单。
该Form组件封装了表单，并提供处理表单状态、验证和提交的功能。onFinish当表单提交时，会调用该属性并接收一个包含表单值的对象。
该Field组件用于定义表单字段并提供验证规则。`field`name属性用于定义字段名称，任何自定义验证规则都可以使用该rules属性定义。
该Input组件是一个自定义输入字段，它接收value主属性以及任何其他附加属性。它用于定义表单的输入字段。
最后，提交按钮定义在组件外部Field，用于触发表单提交。
这只是如何在 React 应用程序中使用 rc-field-form 来管理表单字段和处理表单提交的一个例子。
5. React 最终形式
React Final Form是一款高性能的基于订阅的 React 表单状态管理组件。它遵循观察者模式，组件会在事件发生时订阅这些事件。它不会重新渲染整个表单，而只会重新渲染已订阅的字段。该组件在GitHub上拥有 7.2k 个 star ，在npm上拥有364k 次用户下载。
特征：
- 零依赖项（不会影响软件包大小）
- 仅依赖项：React 和 React Final Form
- 选择加入订阅——只接收我们需要的最新信息！
安装方法：
npm i react-final-form
使用方法：
import { Form, Field } from 'react-final-form'
const MyForm = () => (
<Form
onSubmit={onSubmit}
validate={validate}
render={({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<h2>Simple Default Input</h2>
<div>
<label>First Name</label>
<Field name="firstName" component="input" placeholder="First Name" />
</div>
<h2>An Arbitrary Reusable Input Component</h2>
<div>
<label>Interests</label>
<Field name="interests" component={InterestPicker} />
</div>
<h2>Render Function</h2>
<Field
name="bio"
render={({ input, meta }) => (
<div>
<label>Bio</label>
<textarea {...input} />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
/>
<h2>Render Function as Children</h2>
<Field name="phone">
{({ input, meta }) => (
<div>
<label>Phone</label>
<input type="text" {...input} placeholder="Phone" />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
</Field>
<button type="submit">Submit</button>
</form>
)}
/>
)
上面的代码示例展示了如何使用 React Final Form 库创建一个包含多种字段类型的表单，例如文本输入框、可复用的自定义组件和渲染函数。表单组件接收一个onSubmit函数和一个验证函数，分别用于处理表单提交和验证。字段组件用于创建每个字段，它可以接收一个组件属性（用于使用自定义组件渲染字段）或一个渲染属性（用于使用自定义函数渲染字段）。输入值和状态由库管理，任何验证错误都会在用户与表单交互时显示。
rc-field-form与React Final Form 的比较
| rc-field-form | React 最终形态 | |
|---|---|---|
| 成分 | 一个用于在 React 中构建表单的组件库。 | 一个用于在 React 中构建表单的库。 |
| API | 它提供表单、表单项和其他表单组件，可用于构建表单。 | 它提供了一个<Form>组件和一个<Field>可用于构建表单的组件。 |
| 包装尺寸 | RC-Field-Form 的软件包大小约为 105 KB。 | React Final Form 的包大小约为 38 KB。 |
| 验证 | 它提供内置的验证规则，例如必填、模式和最大长度。它还允许自定义验证规则。 | 它通过验证函数提供验证功能，该函数可以作为 prop 传递给<Field>组件。它还允许自定义验证函数。 |
| 学习曲线 | 它提供了良好的文档和示例，方便用户入门。 | 它还提供了良好的文档和示例，方便用户快速上手。 |
6. react-credit-cards
react-credit-cards - 一个简洁的 React 信用卡组件。它在GitHub上有 2.4k 个 star，在npm上有 27.9k 次用户下载。
特征：
- react-credit-cards 支持Payment中所有可用的信用卡发行商，以及 Hipercard（巴西信用卡）。
安装方法：
npm i react-credit-cards
使用方法：
import React from 'react';
import Cards from 'react-credit-cards';
export default class PaymentForm extends React.Component {
state = {
cvc: '',
expiry: '',
focus: '',
name: '',
number: '',
};
handleInputFocus = (e) => {
this.setState({ focus: e.target.name });
}
handleInputChange = (e) => {
const { name, value } = e.target;
this.setState({ [name]: value });
}
render() {
return (
<div id="PaymentForm">
<Cards
cvc={this.state.cvc}
expiry={this.state.expiry}
focused={this.state.focus}
name={this.state.name}
number={this.state.number}
/>
<form>
<input
type="tel"
name="number"
placeholder="Card Number"
onChange={this.handleInputChange}
onFocus={this.handleInputFocus}
/>
...
</form>
</div>
);
}
}
上面的代码示例展示了一个简单的 React 信用卡支付表单，它使用react-credit-cards库来显示正在填写的信用卡信息。表单包含卡号、有效期、持卡人姓名和 CVC 安全码的输入框。表单的状态由组件的状态对象管理，其中包含handleInputFocus用于handleInputChange更新状态和跟踪当前焦点输入框的方法。表单提交后，数据可以发送到后端进行处理。
7. formsy-react
formsy-react - 一个用于 React 的表单输入构建器和验证器。它在GitHub上有 761 个 star，在npm上有 25k 次用户下载。
特征：
- 构建任何表单元素组件。不仅限于传统输入框，任何我们想要的组件都可以，而且免费获得验证功能。
- 添加验证规则并使用简单的语法来使用它们
- 使用事件处理程序来处理表单的不同状态（例如 onSubmit、onValid 等）。
- 将外部错误传递给表单以使元素失效（例如来自服务器的响应）
- 动态地向表单添加表单元素，这些元素将自动注册/注销到表单。
安装方法：
npm i formsy-react
使用方法：
// MyInput.js
import { withFormsy } from 'formsy-react';
import React from 'react';
class MyInput extends React.Component {
constructor(props) {
super(props);
this.changeValue = this.changeValue.bind(this);
}
changeValue(event) {
// setValue() will set the value of the component, which in
// turn will validate it and the rest of the form
// Important: Don't skip this step. This pattern is required
// for Formsy to work.
this.props.setValue(event.currentTarget.value);
}
render() {
// An error message is passed only if the component is invalid
const errorMessage = this.props.errorMessage;
return (
<div>
<input onChange={this.changeValue} type="text" value={this.props.value || ''} />
<span>{errorMessage}</span>
</div>
);
}
}
export default withFormsy(MyInput);
上面的代码MyInput使用库定义了一个自定义输入组件formsy-react。withFormsy高阶组件用于包装输入组件，使其能够与库配合使用formsy-react。
该组件定义了一个changeValue方法，用于设置输入组件的值并触发表单验证。该render方法返回输入元素以及错误消息，该错误消息仅在组件无效时显示。
此代码可用于使用库创建具有验证功能的自定义输入组件formsy-react。
react-credit-cards与formsy-react 的比较
| react-credit-cards | formsy-react | |
|---|---|---|
| 成分 | 用于显示信用卡输入字段和验证信用卡信息的组件库。 | 一个用于在 React 中构建表单的库。 |
| API | 它提供了一个**<Cards>**可用于显示信用卡输入字段的组件，并提供了用于自定义的属性。 |
它提供了一个<Form>组件和一个<Field>可用于构建表单的组件。 |
| 包装尺寸 | React Credit Cards 的包大小约为 14 KB。 | Formsy React 的包大小约为 25 KB。 |
| 验证 | 它内置了信用卡号、有效期和安全码的验证规则，也允许自定义验证规则。 | 它通过验证函数提供验证功能，该函数可以作为 prop 传递给<Field>组件。它还允许自定义验证函数。 |
| 学习曲线 | 良好的文档和示例，方便快速入门。 | 它还提供了良好的文档和示例，方便用户快速上手。 |
8. react-form
react-form - 用于在 React 中管理表单状态和验证的 Hooks。它在GitHub上有 2.5k 个 star，在npm上有 14.3k 次用户下载。
特征：
- 使用 React Hooks 构建，适用于 React Hooks
- 高度实用的验证 API，具备一流的异步支持
- 内置验证防抖功能，可自动取消过期的验证
- 深度嵌套表单值的字段范围
- 简洁明了的表单和表单字段元管理
- 完全记忆，可频繁快速地重新渲染
- 字段、范围和表单级别的灵活表单 API
安装方法：
npm i react-form
使用方法：
import React from "react";
import ReactDOM from "react-dom";
import { useForm, useField } from "react-form";
async function sendToFakeServer(values) {
await new Promise(resolve => setTimeout(resolve, 1000));
return values;
}
function validateAddressStreet(value) {
if (!value) {
return "A street is required";
}
return false;
}
async function validateName(name, instance) {
if (!name) {
return "A name is required";
}
return instance.debounce(async () => {
console.log("checking name");
await new Promise(resolve => setTimeout(resolve, 1000));
// All names are valid, so return a false error
return false;
}, 500);
}
function NameField() {
const {
meta: { error, isTouched, isValidating },
getInputProps
} = useField("name", {
validate: validateName
});
return (
<>
<input {...getInputProps()} />{" "}
{isValidating ? (
<em>Validating...</em>
) : isTouched && error ? (
<em>{error}</em>
) : null}
</>
);
}
function AddressStreetField() {
const {
meta: { error, isTouched, isValidating },
getInputProps
} = useField("address.street", {
validate: validateAddressStreet
});
return (
<>
<input {...getInputProps()} />{" "}
{isValidating ? (
<em>Validating...</em>
) : isTouched && error ? (
<em>{error}</em>
) : null}
</>
);
}
function MyForm() {
// Use the useForm hook to create a form instance
const {
Form,
meta: { isSubmitting, canSubmit }
} = useForm({
onSubmit: async (values, instance) => {
// onSubmit (and everything else in React Form)
// has async support out-of-the-box
await sendToFakeServer(values);
console.log("Huzzah!");
},
debugForm: true
});
return (
<Form>
<div>
<label>
Name: <NameField />
</label>
</div>
<div>
<label>
Address Street: <AddressStreetField />
</label>
</div>
<div>
<button type="submit" disabled={!canSubmit}>
Submit
</button>
</div>
<div>
<em>{isSubmitting ? "Submitting..." : null}</em>
</div>
</Form>
);
}
function App() {
return <MyForm />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
上面的使用示例是一段 React 代码，它使用该react-form库来处理表单验证和提交。它使用useFormhook 创建了一个表单实例，并使用 hook 定义了两个表单字段（`fields`NameField和 ` fields` AddressStreetField）useField，每个字段都有自己的验证函数。
该MyForm组件负责渲染表单并处理提交事件。表单提交后，它会使用sendToFakeServer函数将表单数据发送到一个模拟服务器。如果表单数据无效，它会显示错误消息；提交过程中，它会显示“正在提交……”的消息。最后，该**App**组件会渲染MyForm自身。
9. 制服
uniforms - 一个用于根据任何模式构建表单的 React 库。它在GitHub上有 1.7k 个 star，在npm上有 13.9k 次用户下载。
特征：
- 自动生成表单
- 能够渲染所有模式的字段
- 帮助用户一行代码创建自定义字段
- 内联和异步表单验证
- 与各种模式集成
- 主题范围广泛：
安装方法：
npm i uniforms
使用方法：
import React from 'react';
import { AutoForm } from 'uniforms-semantic';
import { bridge as schema } from './GuestSchema';
export function GuestFormBasic() {
return <AutoForm schema={schema} onSubmit={console.log} />;
}
上面的代码使用库创建了一个基本表单，该**uniforms-semantic**库具有预定义的架构和一个控制台日志语句，以便在提交表单时显示表单数据。
react-form与uniform 变量
| react-form | 制服 | |
|---|---|---|
| 成分 | 使用React Hooks构建，适用于React Hooks | 一个用于在 React 中构建表单的库。 |
| API | 字段、范围和表单级别的灵活表单 API | 它提供了一组可用于构建表单的组件，包括、、<AutoForm>等等。<LongTextField><SelectField> |
| 包装尺寸 | React Form 的包大小约为 14 KB。 | Uniforms 软件包大小约为 72 KB。 |
| 验证 | 内置验证防抖功能，可自动取消过期的验证 | 它提供了一个简单的基于模式的验证系统，可用于验证表单输入。它还允许自定义验证函数。 |
| 学习曲线 | 良好的文档和示例，方便快速入门。 | 良好的文档和示例，方便快速入门。 |
10. MobX React 表单
MobX React Form - 响应式 MobX 表单状态管理。它在GitHub上拥有 1.1k 个 star，在npm上拥有 7.2k 次用户下载。
特征：
- 可扩展验证插件。
- 同步和异步验证（带承诺和自动错误）。
- 嵌套字段（带序列化和验证）。
- 嵌套表单（带嵌套提交和验证钩子）。
- 事件钩子、事件处理程序和验证钩子
- 观察者和拦截者
- 自定义组件的绑定。
- 支持 Material UI、React Widgets、React Select 等。
- 专用开发者工具包。
安装方法：
npm i mobx-react-form
使用方法：
import React from 'react';
import { observer } from 'mobx-react';
export default observer(({ myForm }) => (
<form onSubmit={myForm.onSubmit}>
<label htmlFor={myForm.$('email').id}>
{myForm.$('email').label}
</label>
<input {...myForm.$('email').bind()} />
<p>{myForm.$('email').error}</p>
{/* ... other inputs ... */}
<button type="submit" onClick={myForm.onSubmit}>Submit</button>
<button type="button" onClick={myForm.onClear}>Clear</button>
<button type="button" onClick={myForm.onReset}>Reset</button>
<p>{myForm.error}</p>
</form>
));
上面的代码使用 React 和mobx-reactMobX 库创建了一个表单组件。该observer函数用于使组件能够响应由 MobX 管理的表单状态的变化。
表单组件会渲染一个表单元素，其中的输入字段是根据myForm作为 prop 传递的对象生成的。该myForm对象需要包含 MobX 提供的方法和属性，用于处理表单的验证、提交、清除和重置。
输入字段是使用对象bind的方法生成的$，该方法会生成必要的属性和处理程序，使输入字段能够对更改做出反应。
表单还包含用于提交、清除和重置表单的按钮。点击这些按钮时，会分别调用`onmission` myForm.onSubmit、` myForm.onClearclear` 和`reset` 方法。myForm.onReset
11. 房屋形式
HouseForm——一个以字段为先的 React 表单验证框架，它将表单验证和 UI 代码完美融合。它在GitHub上拥有 173 个 star，在npm上拥有 191 次用户下载。
特征：
- 字段优先：将我们的用户界面和验证逻辑整合到一个位置——我们的字段。
- 无头且运行时无关：HouseForm 可在任何 React 支持的环境中使用，从原生应用程序到 CLI。
- Zod Powered：轻松为我们的表单字段设置复杂的验证。
- 灵活的 API：可以根据每个字段的具体情况，灵活组合最适合的验证方法。
- 轻量级：HouseForm 的压缩包较小，GZIP 压缩后小于 4KB。
- 速度快：我们的基准测试表明，我们的速度与常见的替代方案持平或更快。
安装方法：
npm i houseform
使用方法：
import {Form} from 'houseform';
const App = () => (
<Form onSubmit={() => {}}>
{({submit}) => <button onClick={submit}>Submit</button>}
</Form>
)
该App组件渲染时Form会将一个onSubmitprop 设置为一个空箭头函数。
该Form组件接受一个带有参数的函数作为子元素submit。该函数返回一个button带有onClick事件处理程序的元素submit。
当按钮被点击时，它会触发组件submit提供的函数Form来处理表单提交逻辑。
HouseForm与MobX React Form 的比较
| HouseForm | MobX React 表单 | |
|---|---|---|
| 成分 | HouseForm 使用不受控制的组件 | 不受控制与受控 |
| API | 灵活的 API | 它提供了一组可用于构建表单的组件，包括<Form>、<Field>和。<Errors> |
| 包装尺寸 | HouseForm 文件大小为 13.5kb（未压缩，未使用 GZIP 压缩）。 | 压缩后 110.6 kB 和压缩后 + GZIPPED 28.7 kB |
| 验证 | HouseForm 使用 Zod 进行验证 | 可扩展验证插件。 |
| 学习曲线 | 良好的文档和示例，方便快速入门。 | 良好的文档和示例，方便快速入门。 |
结论
感谢阅读本文！希望它对你的编程之旅有所帮助。继续编程，享受编程的乐趣吧！
文章来源：https://dev.to/femi_akinyemi/top-10-react-form-libraries-for-efficient-form-creation-hp2