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>
  );
}
相关推荐
艾小码8 分钟前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..1 小时前
ES6是什么
前端·javascript·es6
Jammingpro2 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI8 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front9 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie10 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀10 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻10 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树10 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法