Menghantar borang secara automatik dalam bentuk react-hook-form

React Hook Form ialah perpustakaan yang berkuasa untuk mengurus borang dalam React, menawarkan prestasi cemerlang dan API yang fleksibel. Walau bagaimanapun, terdapat senario di mana anda mungkin mahu mencipta borang yang tidak berkelakuan sama seperti borang standard. Kadangkala data borang perlu diserahkan secara automatik apabila perubahan berlaku. Ini amat berguna untuk borang yang memerlukan pengesahan dan penyerahan masa nyata, seperti borang carian atau antara muka penapisan dinamik.

Katakanlah, kami mempunyai borang carian mudah untuk e-mel.

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

Tetapi kemudian kami mungkin mahu mengalih keluar butang "Serah" dan menyerahkan data tanpanya. Untuk berbuat demikian, kami boleh membuat cangkuk boleh guna semula tersuai yang akan menyerahkan borang secara automatik apabila ia berubah.

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

Bagaimana ia berfungsi

• pencetus: Mencetuskan pengesahan untuk keseluruhan borang atau medan tertentu.
• tonton: Memantau perubahan data borang.
• onSubmit: Fungsi untuk melaksanakan apabila borang berjaya disahkan.
• debounceTime: Mengawal kekerapan borang perlu diserahkan selepas perubahan (lalai ialah 500ms).
• onValidationFailed: Panggilan balik pilihan untuk mengendalikan kegagalan pengesahan

Cangkuk secara automatik mencetuskan pengesahan borang apabila medan berubah. Jika pengesahan berjaya, ia membatalkan penyerahan untuk mengelakkan permintaan yang berlebihan.

Penggunaan

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

Kait useAutoSubmit memudahkan proses menyerahkan borang secara automatik dalam aplikasi React. Dengan menggunakan cangkuk ini, anda boleh memastikan bahawa borang anda sentiasa dikemas kini dengan input pengguna terkini, mengurangkan keperluan untuk penyerahan manual dan meningkatkan keseluruhan pengalaman pengguna

Kod sumber coretan

Atas ialah kandungan terperinci Menghantar borang secara automatik dalam bentuk react-hook-form. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!