Automatisches Senden von Formularen im React-Hook-Formular

React Hook Form ist eine leistungsstarke Bibliothek zum Verwalten von Formularen in React, die hervorragende Leistung und eine flexible API bietet. Es gibt jedoch Situationen, in denen Sie möglicherweise ein Formular erstellen möchten, das sich nicht genau wie ein Standardformular verhält. Manchmal müssen Formulardaten automatisch übermittelt werden, wenn Änderungen auftreten. Dies ist besonders nützlich für Formulare, die eine Validierung und Übermittlung in Echtzeit erfordern, wie z. B. Suchformulare oder dynamische Filterschnittstellen.

Sagen wir, wir haben ein einfaches Suchformular für E-Mails.

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

Aber dann möchten wir vielleicht die Schaltfläche „Senden“ entfernen und Daten ohne sie übermitteln. Dazu können wir einen benutzerdefinierten wiederverwendbaren Hook erstellen, der das Formular automatisch sendet, wenn es sich ändert.

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

Wie es funktioniert

• Auslöser: Löst die Validierung für das gesamte Formular oder bestimmte Felder aus.
• beobachten: Überwacht Formulardatenänderungen.
• onSubmit: Die Funktion, die ausgeführt werden soll, wenn das Formular erfolgreich validiert wurde.
• debounceTime: Steuert, wie oft das Formular nach Änderungen übermittelt werden soll (Standard ist 500 ms).
• onValidationFailed: Ein optionaler Rückruf zur Behandlung von Validierungsfehlern

Der Hook löst automatisch eine Formularvalidierung aus, wenn sich ein Feld ändert. Wenn die Validierung erfolgreich ist, wird die Übermittlung entprellt, um übermäßige Anfragen zu vermeiden.

Verwendung

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

Der useAutoSubmit-Hook vereinfacht den Prozess der automatischen Übermittlung von Formularen in React-Anwendungen. Durch die Verwendung dieses Hooks können Sie sicherstellen, dass Ihre Formulare immer auf dem neuesten Stand der Benutzereingaben sind, wodurch die Notwendigkeit manueller Übermittlungen reduziert und das Benutzererlebnis insgesamt verbessert wird

Snippet-Quellcode

Das obige ist der detaillierte Inhalt vonAutomatisches Senden von Formularen im React-Hook-Formular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!