React Hook Form：精准监听特定输入字段并优化提交策略

import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';

function MyForm() {
  const {
    register,
    handleSubmit,
    watch,
    setValue,
    getValues,
    formState: { errors }
  } = useForm({
    defaultValues: {
      includePA: false,
      premiumPA: 0,
      otherField: ''
    }
  });

  // 监听 'includePA' 字段
  const includePAValue = watch("includePA");
  // 监听 'premiumPA' 字段，或者其他需要触发提交的字段
  const premiumPAValue = watch("premiumPA"); 
  // 如果需要监听多个字段来触发同一个提交，可以这样写：
  // const watchedValues = watch(["includePA", "premiumPA"]);

  // 模拟提交处理函数
  const onSubmitHandler = (data) => {
    console.log("表单已提交，数据：", data);
    // 实际的API调用逻辑
    // 例如：axios.post('/api/submit', data);
  };

  useEffect(() => {
    // 处理 'includePA' 字段的逻辑，例如根据其值设置 'premiumPA'
    // 这一部分是根据原问题中特定的业务逻辑，与防抖提交是独立的
    if (typeof includePAValue !== 'undefined') { // 确保值已初始化
      setValue("premiumPA", includePAValue ? 10000000 : 0);
    }
  }, [includePAValue, setValue]); // 依赖 includePAValue 和 setValue

  useEffect(() => {
    let timer;
    // 只有当 premiumPAValue 发生变化时才触发此 useEffect
    // 或者当 watchedValues 数组中的任一值变化时
    // 这里的依赖项可以是 premiumPAValue，也可以是其他需要触发提交的字段
    // 为了演示防抖提交，我们假设 premiumPAValue 的变化需要触发提交

    // 清除之前的定时器，实现防抖
    if (timer) clearTimeout(timer);

    // 设置新的定时器，延迟500毫秒后执行提交
    timer = setTimeout(() => {
      // 在防抖结束后执行提交
      // handleSubmit() 会收集当前表单的所有值并调用 onSubmitHandler
      handleSubmit(onSubmitHandler)();
    }, 500);

    // 清理函数：在组件卸载或依赖项变化时清除定时器
    return () => {
      clearTimeout(timer);
    };
  }, [premiumPAValue, handleSubmit, onSubmitHandler]); // 依赖 premiumPAValue, handleSubmit, onSubmitHandler

  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <div>
        <label>
          <input
            type="checkbox"
            {...register("includePA")}
          />
          包含PA
        </label>
      </div>
      <div>
        <label>
          Premium PA:
          <input
            type="number"
            {...register("premiumPA", { valueAsNumber: true })}
            readOnly // 通常 premiumPA 是根据 includePA 自动设置的
          />
        </label>
      </div>
      <div>
        <label>
          其他字段 (不会触发防抖提交):
          <input
            type="text"
            {...register("otherField")}
          />
        </label>
      </div>
      <button type="submit">手动提交</button>
    </form>
  );
}

export default MyForm;