最大程度减少重渲染次数、更快速的挂载以提供最佳的用户体验。 适应性强 由于表单的状态就在本地,因此无须任何依赖即可应用状态。 奖状 荣获2020年GitNation React OS Productivity Booster奖。 库代码比较 减少您必须编写的代码量是 React Hook Form 的主要目标之一。 为了说明这一点,让我们来简单对比下目前最流行
Super Light Package size matters. React Hook Form is a tiny library without any dependencies. Performance Minimizes the number of re-renders, minimizes validate computation, and faster mounting. Adoptable Since form state is inherently local, it can be easily adopted without other dependencies. ...
message: "年龄必须大于18岁" }, max: { value: 99, message: "年龄必须小于99岁" } }); // 自定义验证 register("password", { validate: value => value === watch("confirmPassword") || "密码不匹配" });
export default App; 这里使用了validate选项来定义验证规则,并通过errors.email检查输入是否有效,如果无效会显示错误信息。 常用表单元素的处理 输入框的使用 输入框是最常见的表单元素之一,以下是一个简单的例子: import React from 'react'; import { useForm } from 'react-hook-form'; function App() { cons...
import React, { useCallback, useMemo } from "react"; import { useForm } from "react-hook-form"; import * as yup from "yup"; const useYupValidationResolver = validationSchema => useCallback( async data => { try { const values = await validationSchema.validate(data, { abortEarly: fal...
validate: (value) => { const specialChar = /(?=.*\W)/; return specialChar.test(value) || '密码必须包含特殊字符'; } } } }); return { register, handleSubmit, errors, watch }; } function FormExample() { const { register, handleSubmit, errors, watch } = useFormValidation(); ...
最后是validate,这是一个自定义函数,它允许我们访问输入的值。validate允许我们提供自己的逻辑来确定它是否有效(通过返回布尔值true或false)。 对于这里的电子邮件,我们也希望它是必需的,并且是有效的电子邮件。为了验证这一点,我们可以将输入传递给来自名为isEmail的库验证器的函数。
consterror = validate(field); if(error) { errorsRef.current[field.name] = error; } }; 通过这种错误管理方式,React Hook Form 避免了全局重新渲染,仅更新有错误的字段。 以下是一个示例,展示了 React Hook Form 如何避免不必要的渲染: import React from'react'; ...
validate={(values) => { const errors = {}; if (!values.email) { errors.email = "必填"; } else if ( !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email) ) { errors.email = "无效的电子邮件地址"; } return errors; }} onSubmit={(values, { setSubmitti...
当其他字段满足特定条件时,可以使用React-hook-form的validate方法来触发验证。 动态字段:React-hook-form支持动态添加和删除字段。可以使用useFieldArray钩子来处理动态字段的交互。通过添加或删除字段,可以实现与其他字段的交互,例如根据某个字段的值动态添加或删除其他字段。 表单提交:React-hook-form提供了handleSubmit...