反応フックフォームでフォームを自動的に送信する

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 アプリケーションでフォームを自動的に送信するプロセスを簡素化します。このフックを使用すると、フォームが常に最新のユーザー入力で最新の状態に保たれるため、手動送信の必要性が減り、全体的なユーザー エクスペリエンスが向上します

ソースコードの抜粋

以上が反応フックフォームでフォームを自動的に送信するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。