Skip to content

React Hook Form

高性能、灵活、可扩展的表单,且具有易于使用的校验。

开发体验

直观、功能齐全的 API 在构建表单时为开发者提供无缝体验。

HTML 标准

利用现有的 HTML 标记并使用我们基于约束的验证 API 来验证你的表单。

超轻量

包的大小很重要。 React Hook Form 是一个没有任何依赖项的小型库。

性能

最大限度地减少重新渲染的次数、最大限度地减少验证计算并加快挂载速度。

可适应

由于表单状态本质上是局部的,因此可以轻松适应它而无需其他依赖项。

用户体验

努力提供最佳的用户体验并带来一致的验证策略。

更少的代码。更佳的性能

React Hook Form 减少了需要编写的代码量,同时消除了不必要的重新渲染。 现在通过以下示例深入探讨:

React Hook Form

import { useForm } from "react-hook-form";
const Example = () => {
const { handleSubmit, register, formState: { errors } } = useForm();
const onSubmit = values => console.log(values);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
type="email"
{...register("email", {
required: "Required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "invalid email address"
}
})}
/>
{errors.email && errors.email.message}
<input
{...register("username", {
validate: value => value !== "admin" || "Nice try!"
})}
/>
{errors.username && errors.username.message}
<button type="submit">Submit</button>
</form>
);
};

订阅

就构建表单而言,性能是用户体验的一个重要方面。 你将能够订阅各个输入和表单状态更新,而无需重新渲染整个表单。

高光时刻

该项目正在得到社会和业界的认可。 它比以往任何时候都帮助更多的开发者在 React 中构建表单。

JavaScript 新星

React Hook Form 已经成熟并围绕钩子发展。 简化了 React 开发的一部分。

React 开源奖

2020 年 GitNation React OS 生产力助推器类别奖得主。

技术雷达

该项目很幸运地受到了语言和框架部分的关注。

在线示范

以下表单演示了表单验证的实际操作。 每列代表自定义钩子中捕获的内容。 你还可以通过单击“编辑”按钮来更改表单中的字段。

Example

or

Watch

Change inputs value to update watched values

{}

Errors

Validation errors will appear here

Touched

Touched fields will display here

[]

准备好开始了吗?

表单处理并不一定很痛苦。 React Hook Form 将帮助你编写更少的代码,同时获得更好的性能。

React Hook Form 中文网 - 粤ICP备13048890号