当前位置：首页 > article >正文

React 表单Form 中的 useWatch

article 2024/11/24 0:01:26

1、useWatch 介绍

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

2、基本用法

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：是否禁用表单字段的监听。

useWatch({
  control,          // 必须，来自 useForm
  name: 'myField',   // 监听的字段名
  defaultValue: '',  // 可选的默认值
});

4、监听多个字段

const { control } = useForm();
const watchedValues = useWatch({
  control,
  name: ['field1', 'field2'],
});

console.log(watchedValues);

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

{
  field1: 'value1',
  field2: 'value2',
}

5、监听整个表单

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

const watchedFormValues = useWatch({
  control,
});

console.log(watchedFormValues);

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

6、与 useEffect 一起使用

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

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>
  );
}