1、介绍
useForm 是 React Hook Form 中的核心 Hook,用于管理表单的状态和行为。它提供了处理表单验证、数据收集、状态管理等功能的简便方法。useForm 本质上是用于创建和配置表单,并允许你在组件中与表单字段交互。
2、基本用法
useForm 是一个函数,它返回表单的核心控制对象。你可以通过 useForm 获取多个方法和状态来处理表单。
import { useForm } from 'react-hook-form';function MyForm() {// useForm hook 返回的方法和状态const { register, handleSubmit, formState: { errors }, reset, setValue } = useForm();// 提交表单时的处理逻辑const onSubmit = (data) => {console.log(data);};return (<form onSubmit={handleSubmit(onSubmit)}><input{...register('username', { required: 'Username is required' })} // 注册字段/>{errors.username && <p>{errors.username.message}</p>} // 显示错误信息<button type="submit">Submit</button></form>);
}
3、useForm 的返回值
useForm 返回一个包含许多方法和属性的对象,用于处理表单状态和行为。以下是一些常用的返回值:
- register
用于将输入框或其他表单控件注册到 React Hook Form 中,它可以接受验证规则。 - handleSubmit
用于处理表单提交,它是一个函数,接受一个回调函数,当表单数据合法时会执行这个回调。 - formState
formState 包含表单状态的信息,通常包括以下内容:
errors:包含字段验证错误信息。
isSubmitting:指示表单是否正在提交。
isValid:指示表单数据是否有效。
isDirty:指示表单数据是否被修改。 - reset
用于重置表单字段的值,并且可以设置表单的默认值。 - setValue
用于动态设置表单字段的值。
setValue('username', 'Updated User');
- watch
watch 用于观察表单字段的值,返回当前表单值或指定字段的值。watch 还可以用于实现动态表单交互。
const username = watch('username');
- control
control 是用来控制表单数据的对象,通常与 useController 和 useWatch 等其他 Hook 一起使用。
4、useForm 的常见配置选项
useForm 也支持一些配置选项,允许你定制表单行为。
const { register, handleSubmit, formState: { errors } } = useForm({mode: 'onSubmit', // 表单验证触发时机: 'onChange', 'onBlur', 'onSubmit'reValidateMode: 'onChange', // 设置重新验证的时机defaultValues: { // 设置表单默认值username: '',password: '',},resolver: yourCustomResolver, // 自定义验证
});
5、常见配置选项:
mode:定义验证的触发方式,常见选项:
‘onChange’:在每次字段变化时触发验证。
‘onBlur’:在字段失去焦点时触发验证。
‘onSubmit’:在提交表单时触发验证(默认)。
defaultValues:设置表单字段的默认值。
resolver:自定义验证器,常用于与第三方验证库(如 Yup、Joi)结合使用。
6、表单验证:
React Hook Form 支持灵活的表单验证方式。你可以在 register 中指定验证规则,例如:
<input{...register('username', {required: 'Username is required',minLength: { value: 5, message: 'Username must be at least 5 characters' }})}
/>
你可以定义多种验证规则:
required:字段是否为必填。
minLength、maxLength:字段长度的最小值和最大值。
pattern:正则表达式验证。
validate:自定义验证函数。
7、和 Yup 配合使用进行验证:
React Hook Form 可以和 Yup 配合使用来进行表单验证。通过 yupResolver 来实现。
npm install yup @hookform/resolvers
import { useForm } from 'react-hook-form';
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';// 定义 Yup 验证规则
const schema = Yup.object().shape({username: Yup.string().required('Username is required').min(5, 'Username must be at least 5 characters'),password: Yup.string().required('Password is required').min(6, 'Password must be at least 6 characters'),
});function MyForm() {const { register, handleSubmit, formState: { errors } } = useForm({resolver: yupResolver(schema), // 使用 yupResolver 进行验证});const onSubmit = (data) => {console.log(data);};return (<form onSubmit={handleSubmit(onSubmit)}><input {...register('username')} />{errors.username && <p>{errors.username.message}</p>}<input {...register('password')} type="password" />{errors.password && <p>{errors.password.message}</p>}<button type="submit">Submit</button></form>);
}
8、总结:
useForm 是 React Hook Form 的核心 hook,用于创建和管理表单。
通过 useForm,你可以注册表单字段、处理表单提交、进行验证、获取表单状态等。
useForm 提供了灵活的配置选项和与第三方验证库的集成支持,方便你构建复杂的表单逻辑。
React Hook Form 的优势在于其高性能、简洁的 API 和与其他库(如 Yup)的易集成,使其成为处理表单的理想选择。