React Academy · Lekcja

Pierwsze kroki z React Hook Form

Instalacja RHF, wywołanie useForm, rejestrowanie pól oraz obsługa przesyłania formularza.

Pierwsze kroki z React Hook Form to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Wprowadzenie

W tej lekcji zainstalują Państwo React Hook Form, wywołają useForm, zarejestrują pola wejściowe i będą obsługiwać przesyłanie formularzy bez zarządzania pojedynczymi zmiennymi stanu.

Dlaczego React Hook Form?

Tradycyjne formularze kontrolowane w React wymagają użycia useState dla każdego pola i onChange dla każdego elementu wejściowego. React Hook Form (RHF) zarządza tym wewnętrznie za pomocą pól niekontrolowanych, zapewniając prostsze API i mniej ponownych renderowań.

Instalacja

Proszę zainstalować pakiet. Do podstawowego użycia nie są wymagane żadne dodatkowe zależności peer.

npm install react-hook-form

Hook useForm

Wywołanie useForm() zwraca funkcję register, opakowanie handleSubmit oraz formState. Są to trzy podstawowe elementy potrzebne w każdym formularzu.

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Rejestrowanie pól wejściowych

Wynik register('fieldName') należy rozpropagować na każde pole wejściowe. RHF wewnętrznie dołącza do pola referencję i procedury obsługi zdarzeń — nie trzeba używać value ani onChange.

<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

Procedura obsługi onSubmit

handleSubmit sprawdza poprawność wszystkich pól i wywołuje procedurę onSubmit z obiektem danych o określonym typie tylko wtedy, gdy formularz jest poprawny. Jeśli sprawdzanie poprawności się nie powiedzie, zamiast tego wypełnia formState.errors.

const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Wartości domyślne

Proszę przekazać `defaultValues` do useForm, aby wstępnie wypełnić pola formularza. Jest to przydatne w formularzach edycji, w których wczytywane są istniejące dane.

const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

Właściwości formState

formState udostępnia przydatne wartości logiczne: `isSubmitting` (true podczas działania handleSubmit), `isDirty` (true, jeśli zmieniono dowolne pole), `isValid` (true, jeśli nie ma błędów) oraz obiekt `errors`.

const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Resetowanie formularza

Proszę wywołać `reset()`, aby wyczyścić wszystkie pola i zresetować formState. Opcjonalnie można przekazać nowe wartości domyślne.

const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Zaleta wydajnościowa

Ponieważ RHF używa pól niekontrolowanych, formularz nie jest ponownie renderowany po każdym naciśnięciu klawisza — w przeciwieństwie do kontrolowanych formularzy React. Ponowne renderowanie wywołują tylko błędy walidacji i stan przesyłania, dzięki czemu duże formularze działają płynnie.

Szybkie sprawdzenie

Co robi wywołanie handleSubmit(onSubmit), gdy użytkownik przesyła formularz?

Podsumowanie

Należy zainstalować RHF, wywołać useForm, aby uzyskać register i handleSubmit, rozpropagować register() na polach wejściowych oraz opakować procedurę obsługi przesyłania za pomocą handleSubmit. Dla formularzy edycji należy ustawić defaultValues, a po pomyślnym przesłaniu wywołać reset().

Następnie

Następna lekcja: **Reguły walidacji i komunikaty o błędach** — zastosują Państwo wbudowane reguły walidacji i będą wyświetlać użytkownikom komunikaty o błędach.

Często zadawane pytania

Czy lekcja „Pierwsze kroki z React Hook Form” jest bezpłatna?

Tak — pełny tekst „Pierwsze kroki z React Hook Form” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pierwsze kroki z React Hook Form”?

Instalacja RHF, wywołanie useForm, rejestrowanie pól oraz obsługa przesyłania formularza. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Pierwsze kroki z React Hook Form”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do React Academy