React-Hook-Form에서 자동으로 양식 제출-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2024-09-05 06:50:02

원래의

1097명이 탐색했습니다.

Automatically submitting forms in 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!