react-hook-form

对useForm的理解

官网地址: react-hook-form.com/api

• 全局安装react-hook-form

npm i react-hook-form -g

• 使用方法

//useForm的使用
import {useForm} from 'react-hook-form'

const form = useForm() //useForm中可以为空，也可以是一个object(关于form的数据)

//useForm对象的一些默认值
useForm({
mode: 'onSubmit', //验证事件的触发时间
reValidateMode: 'onChange',
defaultValues: {},//form表单的默认值
resolver: undefined,//允许使用任何外部验证库
context: undefined,
criteriaMode: "firstError",//"firstError,all"收集错误
shouldFocusError: true,//当为true的时候，当用户提交了一个验证失败的表单的时候，他会将焦点设置在第一个有错误的字段上面
shouldUnregister: false,//默认情况下，删除输入的时候将保留默认值。设置为true，在卸载期间注销输入。
shouldUseNativeValidation: false,//启用浏览器本机验证
delayError: undefined //以毫秒为单位 延迟向最终用户显示错误状态
})

//useForm的一些方法
const {
getValues,//拿到form的数据
setValue,//设置form的数据
register,
unregister,
formState,
watch,//监视指定的输入，并返回其值
handleSubmit,//处理提交
reset,//重置整个表单状态，字段引用和订阅
resetField,//重置单个字段状态
setError,//手动设置错误
clearErrors,//清楚设置的错误
setFocus,//设置焦点
getFieldState,//重置单个字段状态
trigger,//手动触发校验
control//包含将组件注册到React Hook Form中的方法
}