React Hook Form使用指南

表单作为用户交互最为常见的形式，项值的维护管理是个问题。

实际项目中React Hook Form是一个不错的选择。但是很多时候对于该工具库使用的都过于浅，导致一些场景开发过于复杂化，而恰当灵活的使用hook form，可以大大提升开发效率。
这里就把hook form的常用场景和使用方法做一个总结。

一些方法

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

useFormContexthook

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

useFieldArrayhook

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

watchfunc

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

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

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

registerfunc

resetfunc

reset({
              price: 111
            })

reset时没有声明的字段，则会重置为defaultValues设置的值。即reset操作是面向所有字段，非部分字段。

如果想部分字段reset，应该是这样。

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

常见的一些问题

array数据更新，没有watch到

写在最后

链接

• https://github.com/orgs/react-hook-form/discussions/2704
• https://react-hook-form.com/