React Form

In this tutorial, you'll learn about Cum să gestionezi formulare în React. We cover key concepts, practical examples, and best practices.

Formularele în React pot fi gestionate în două moduri: controlled (starea controlează inputul) și uncontrolled (DOM-ul controlează inputul).

The Problem

În HTML, formularul își menține propria stare internă. În React, vrem ca starea să fie single source of truth pentru a valida și procesa datele ușor.

The Wrong Way (Uncontrolled fără control)

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    // cum accesezi valorile?
  }
  return <form onSubmit={handleSubmit}>
    <input name="email" />
    <button type="submit">Trimite</button>
  </form>;
}

The Right Way (Controlled)

import { useState } from 'react';

function Form() {
  const [email, setEmail] = useState('');

  function handleSubmit(e) {
    e.preventDefault();
    alert(`Email: ${email}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
      <button type="submit">Trimite</button>
    </form>
  );
}

Output: La submit, se afișează valoarea introdusă.

Varianta Uncontrolled cu useRef

import { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    alert(inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} defaultValue="text" />
      <button type="submit">Trimite</button>
    </form>
  );
}

Step-by-Step Fix

1. Alege abordarea

• Controlled — pentru validare, resetare, schimbări dinamice
• Uncontrolled — pentru formulare simple, fără validare complexă

2. Controlled — leagă value + onChange

<input value={value} onChange={e => setValue(e.target.value)} />

3. Uncontrolled — folosește useRef

const inputRef = useRef();
<input ref={inputRef} />

Prevention Tips

• Folosește controlled pentru validare în timp real
• Folosește uncontrolled cu useRef pentru formulare simple
• Nu uita preventDefault() pe onSubmit

Common Mistakes

1. Fără value pe input — input controlled fără value afișează defaultValue
2. Uitarea onChange — input controlled devine read-only
3. Fără preventDefault — pagina se reîncarcă la submit
4. useRef fără defaultValue — input uncontrolled pornește gol

FAQ

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro. DodaTech tools integrate seamlessly with React for enhanced productivity and security.