React Hook Form使用指南

发表于 2025-03-31 更新于 2025-04-28 本文字数： 1.3k 阅读时长 ≈ 2 分钟

表单作为用户交互最为常见的形式，值的校验/维护是个问题。

react技术栈下中React Hook Form 包名: react-hook-form是个不错的方案，它的功能很强大，恰当灵活的使用它，可以提升code可维护性和研发效率。

这里就把hook form的常用场景/使用/容易忽略的点做一个总结。

一些方法

实际使用中，我们常用的只是useForm/Controller/getValues

抛开常用的useForm/useWatch/Controller，hook-form还有其他一些方法，这里就介绍下。

useForm中的mode

useFormContext`hook`

很多时候，我们管理form是使用的useForm,如果表单组件是嵌套的，那么嵌套的表单项的值管理就成了问题。常常需要将父组件的control传递给子组件，然后子组件再传递给孙组件，这样一层一层传递，非常麻烦。如果是使用useFormContext，那么就可以直接在组件内部管理form的值，而不需要一层一层传递。

useFieldArray`hook`

有时数据存在数组/List类型。比如动态添加项，使用useFieldArray会更为方便。

watch`func`

useWatch用来监听关心的字段变化，或者所有字段当前的值，但假如想知道每次变化哪个字段，或者批量watch用于逻辑处理的话，可以使用watch方法。

const allFieldWatch = useWatch({
  control,
  name:['price'],
})

useEffect(() => {
    const wFn = watch((data, {name}) => {
      console.log('column changed', data, name)
    });
    return wFn.unsubscribe;
  }, [])

register`func`

reset`func`/ setValue

reset方法如果没有声明字段值，则会重置为defaultValues设置的值。
1
2

reset();
reset操作是面向所有字段进行重置，并非部分字段。比如reset只标注了A字段，那么其它字段则会是undefined.
如果想reset单个字段，应该使用setValue法或者reset时候携带所有字段值
1
2
3
4
5

reset({
...getValues(),
price: 111
})

React Hook Form使用指南