以react-hook-form自动提交表单

React Hook Form 是一个强大的库，用于管理 React 中的表单，提供出色的性能和灵活的 API。但是，在某些情况下，您可能希望创建一个行为与标准表单不完全相同的表单。有时，表单数据发生变化时需要自动提交。这对于需要实时验证和提交的表单特别有用，例如搜索表单或动态过滤界面。

比方说，我们有一个简单的电子邮件搜索表单。

import { useForm } from 'react-hook-form';

interface FormValues {
  content: string;
  email: string;
}

const SearchForm = () => {
  const { register, handleSubmit } = useForm<FormValues>();

  const onSubmit = (data: FormValues) => {
    console.log('Form submitted:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>Search by</div>
      <div>
        <label>Content:</label>
        <input {...register('content')} />
      </div>
      <div>
        <label>Email:</label>
        <input {...register('email')} />
      </div>
    </form>
  );
};

但是我们可能想删除“提交”按钮并在没有它的情况下提交数据。为此，我们可以创建一个自定义的可重用挂钩，该挂钩将在表单更改时自动提交表单。

import { debounce } from 'lodash';
import { useCallback, useEffect, useState } from 'react';
import { type UseFormWatch, type FieldValues, type UseFormTrigger, type Path } from 'react-hook-form';

interface AutoSubmitProps<T extends FieldValues> {
  trigger: UseFormTrigger<T>;
  watch: UseFormWatch<T>;
  excludeFields?: Path<T>[];
  onSubmit: () => void;
  onValidationFailed?: () => void;
  debounceTime?: number;
}

/**
 * Automatically submit data when it's changed
 */
export const useAutoSubmit = <T extends FieldValues>({
  trigger,
  watch,
  onSubmit,
  debounceTime = 500,
  excludeFields,
  onValidationFailed,
}: AutoSubmitProps<T>) => {
  const [isSubmiting, setIsSubmiting] = useState(false);
  const debouncedSumbit = useCallback(
    debounce((submitFn: () => void) => {
      submitFn();
    }, debounceTime),
    [],
  );
  useEffect(() => {
    const subscription = watch((_data, info) => {
      if (info?.type !== 'change') return;
      if (info.name && excludeFields?.includes(info.name)) return;
      setIsSubmiting(true);
      trigger()
        .then((valid) => {
          if (valid) debouncedSumbit(onSubmit);
          else onValidationFailed?.();
        })
        .finally(() => setIsSubmiting(false));
    });
    return () => subscription.unsubscribe();
  }, [watch, onSubmit]);
  return { isSubmiting };
};

它是如何运作的

• 触发器：触发整个表单或特定字段的验证。
• watch：监控表单数据变化。
• onSubmit：表单验证成功时执行的函数。
• debounceTime：控制表单更改后提交的频率（默认为 500 毫秒）。
• onValidationFailed：用于处理验证失败的可选回调

当字段更改时，该钩子会自动触发表单验证。如果验证成功，它会取消提交以避免过多的请求。

用法

import { useForm } from 'react-hook-form';
import { useAutoSubmit } from './useAutoSubmit';

interface FormValues {
  content: string;
  email: string;
}

const SearchForm = () => {
  const { register, handleSubmit, trigger, watch } = useForm<FormValues>();

  const onSubmit = (data: FormValues) => {
    console.log('Form submitted:', data);
  };

  useAutoSubmit({
    trigger,
    watch,
    onSubmit: handleSubmit(onSubmit),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>Search by</div>
      <div>
        <label>Content:</label>
        <input {...register('content')} />
      </div>
      <div>
        <label>Email:</label>
        <input {...register('email')} />
      </div>
    </form>
  );
};

useAutoSubmit 钩子简化了 React 应用程序中自动提交表单的过程。通过使用此挂钩，您可以确保您的表单始终与最新的用户输入保持同步，从而减少手动提交的需要并增强整体用户体验

片段源代码

以上是以react-hook-form自动提交表单的详细内容。更多信息请关注PHP中文网其他相关文章！