React-Hook-Form에서 자동으로 양식 제출

React Hook Form은 뛰어난 성능과 유연한 API를 제공하는 React에서 양식을 관리하기 위한 강력한 라이브러리입니다. 그러나 표준 양식과 정확히 동일하게 작동하지 않는 양식을 생성하려는 시나리오가 있습니다. 변경 사항이 발생할 때 양식 데이터를 자동으로 제출해야 하는 경우도 있습니다. 이는 검색 양식이나 동적 필터링 인터페이스와 같이 실시간 검증 및 제출이 필요한 양식에 특히 유용합니다.

이메일에 대한 간단한 검색 양식이 있다고 가정해 보겠습니다.

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: 변경 후 양식을 제출해야 하는 빈도를 제어합니다(기본값은 500ms).
• 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!