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>
  );
}
相关推荐
tianchang11 分钟前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best66614 分钟前
JavaScript的Math内置对象,到底是何方神圣?
javascript
前端小盆友16 分钟前
从零实现一个GPT 【React + Express】--- 【3】解析markdown,处理模型记忆
gpt·react.js
掘金安东尼19 分钟前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
Hilaku21 分钟前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
天天扭码24 分钟前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
每天开心26 分钟前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt33 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅34 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
hahala23331 小时前
ESLint 提交前校验技术方案
前端