08. Formularze w React

O czym jest ta prezentacja?

Formularze w React

W React są dwa podejścia do formularzy: controlled components (React kontroluje wartość przez state) i uncontrolled components (DOM przechowuje wartość, useRef pobiera ją). Kluczowe dla każdej aplikacji z rejestracją, logowaniem, filtrami.

Kluczowe pytania do odpowiedzi

Controlled component? — Wartość inputa żyje w state React, onChange aktualizuje state
Uncontrolled component? — Wartość w DOM, useRef.current.value do odczytu przy submit
Kiedy co? — Controlled dla walidacji w czasie rzeczywistym; uncontrolled dla prostych przypadków
Walidacja? — Sprawdzanie danych przed submit, wyświetlanie błędów przy polach

Zakres merytoryczny

Controlled component — input + useState + onChange handler
Formularz wielopolowy — jeden state obiektowy, generyczny handler
Submit handler — e.preventDefault(), wysłanie danych
Walidacja — inline validation przy onChange, błędy przy polach
Uncontrolled — useRef + defaultValue

Wymagane elementy wizualne

Schemat

Controlled: User types → onChange event → setState → re-render → input.value aktualizowany przez React. Uncontrolled: User types → DOM updates value → submit → useRef.current.value.

Przykład kodu JSX

Formularz rejestracji z walidacją: name, email, password, confirmPassword — z komunikatami błędów.

Warianty realizacji

Controlled input z useState
Submit handler z preventDefault
Prosty formularz login

Forma: 10 slajdów, 10 minut

Ocena: 3.0

Scenariusze i przykłady

Przykład 1 — Controlled form z walidacją

function LoginForm() {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    // Walidacja w czasie rzeczywistym
    if (name === 'email' && !value.includes('@')) {
      setErrors(prev => ({ ...prev, email: 'Podaj poprawny email' }));
    } else {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.email || !formData.password) {
      setErrors({ email: 'Wymagane', password: 'Wymagane' });
      return;
    }
    // Wyślij dane do API
    console.log('Logowanie:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          name="email"
          type="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Email"
        />
        {errors.email && <span className="error">{errors.email}</span>}
      </div>
      <div>
        <input
          name="password"
          type="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="Hasło"
        />
        {errors.password && <span className="error">{errors.password}</span>}
      </div>
      <button type="submit">Zaloguj</button>
    </form>
  );
}

Wskazówki do wystąpienia

Pokaż controlled na żywo

Wpiszcie coś w pole i pokażcie jak React state zmienia się w czasie rzeczywistym — DevTools → Components → state. Klasa zobaczy “magic” Reacta.

Tabela porównawcza

Slajd z tabelą: Controlled (pełna kontrola, walidacja w locie, więcej kodu) vs Uncontrolled (prosto, mało kodu, trudna walidacja).

Zasoby

React — Forms Oficjalna dokumentacja formularzy.

React Hook Form Popularna biblioteka do formularzy.

Do dzieła!

Formularze są wszędzie!