以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中文網其他相關文章！