Soumission automatique de formulaires sous forme de crochet de réaction

React Hook Form est une puissante bibliothèque de gestion de formulaires dans React, offrant d'excellentes performances et une API flexible. Toutefois, il existe des scénarios dans lesquels vous souhaiterez peut-être créer un formulaire qui ne se comporte pas exactement comme un formulaire standard. Parfois, les données du formulaire doivent être soumises automatiquement lorsque des modifications surviennent. Ceci est particulièrement utile pour les formulaires qui nécessitent une validation et une soumission en temps réel, tels que les formulaires de recherche ou les interfaces de filtrage dynamique.

Disons que nous avons un simple formulaire de recherche d'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>
  );
};

Mais nous pourrions alors vouloir supprimer le bouton « Soumettre » et soumettre des données sans celui-ci. Pour ce faire, nous pouvons créer un hook réutilisable personnalisé qui soumettra automatiquement le formulaire lorsqu'il sera modifié.

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

Comment ça marche

• trigger : déclenche la validation pour l'ensemble du formulaire ou des champs spécifiques.
• watch : surveille les modifications des données du formulaire.
• onSubmit : La fonction à exécuter lorsque le formulaire est validé avec succès.
• debounceTime : contrôle la fréquence à laquelle le formulaire doit être soumis après des modifications (la valeur par défaut est 500 ms).
• onValidationFailed : un rappel facultatif pour gérer les échecs de validation

Le hook déclenche automatiquement la validation du formulaire lorsqu'un champ change. Si la validation réussit, la soumission est rejetée pour éviter des demandes excessives.

Usage

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

Le hook useAutoSubmit simplifie le processus de soumission automatique des formulaires dans les applications React. En utilisant ce hook, vous pouvez vous assurer que vos formulaires sont toujours à jour avec les dernières entrées des utilisateurs, réduisant ainsi le besoin de soumissions manuelles et améliorant l'expérience utilisateur globale

Extrait de code source

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!