React 表单Form 中的 useWatch

1、useWatch 介绍

  • 1、useWatch 是 React Hook Form 库提供的一个 hook,用于在表单中观察字段的值变化。
  • 2、useWatch 主要用于监听和获取表单字段的值,而不需要重新渲染整个表单。你可以选择监听单个字段、多个字段或整个表单的变化。
  • 3、松实现动态、响应式的表单行为。

2、基本用法

bash 复制代码
import { useForm, useWatch } from 'react-hook-form';

function MyForm() {
  const { control, handleSubmit } = useForm();
  
  // 使用 useWatch 监听某个字段的变化
  const watchedValue = useWatch({
    control,
    name: 'fieldName',  // 你希望监听的字段名称
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('fieldName')}
        placeholder="Type something"
      />
      <p>Watched Value: {watchedValue}</p>
      <button type="submit">Submit</button>
    </form>
  );
}

在上面的例子中,useWatch 会监听字段 fieldName 的值,当该字段的值发生变化时,watchedValue 会自动更新并在组件中渲染。

3、useWatch 的参数

useWatch 接受一个对象作为参数,以下是常用参数:

  • control:useForm hook 返回的 control 对象,用于控制表单的状态。
  • name:你希望监听的字段名称,可以是单个字段名或者字段名数组。
  • defaultValue:可选参数,用于设置默认值。如果你没有设置 defaultValue,useWatch 会在第一次渲染时返回 undefined,直到表单状态更新。
  • disabled:是否禁用表单字段的监听。
bash 复制代码
useWatch({
  control,          // 必须,来自 useForm
  name: 'myField',   // 监听的字段名
  defaultValue: '',  // 可选的默认值
});

4、监听多个字段

bash 复制代码
const { control } = useForm();
const watchedValues = useWatch({
  control,
  name: ['field1', 'field2'],
});

console.log(watchedValues);

在这个例子中,watchedValues 将是一个对象,包含两个字段的值:

bash 复制代码
{
  field1: 'value1',
  field2: 'value2',
}

5、监听整个表单

如果你需要监听整个表单的变化,可以不传 name 参数,这样 useWatch 会返回整个表单的当前值。

bash 复制代码
const watchedFormValues = useWatch({
  control,
});

console.log(watchedFormValues);

这里,watchedFormValues 将包含整个表单的值。

6、与 useEffect 一起使用

你可以将 useWatch 与 useEffect 配合使用,在表单字段值变化时执行某些副作用操作。

bash 复制代码
import { useForm, useWatch } from 'react-hook-form';
import { useEffect } from 'react';

function MyForm() {
  const { control, handleSubmit } = useForm();
  const watchedValue = useWatch({
    control,
    name: 'fieldName',
  });

  useEffect(() => {
    if (watchedValue) {
      console.log('Field value changed:', watchedValue);
    }
  }, [watchedValue]);

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('fieldName')}
        placeholder="Type something"
      />
      <button type="submit">Submit</button>
    </form>
  );
}
相关推荐
你的人类朋友36 分钟前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手1 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿1 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜051 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau2 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123452 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw02 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator2 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e2 小时前
扣子Coze纯前端部署多Agents
前端