React Academy · Lezione

Input non controllati con useRef

Accedere ai valori degli input del DOM tramite ref invece dello state per semplici moduli.

Input non controllati con useRef è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione utilizzerà input non controllati con useRef per accedere ai valori degli input del DOM senza gestirli nello stato di React.

Controllati e non controllati

Un **input controllato** ha il valore gestito dallo stato di React (value + onChange). Un **input non controllato** gestisce il proprio valore nel DOM; React lo legge tramite un ref solo quando necessario.

// Controlled
<input value={name} onChange={e => setName(e.target.value)} />

// Uncontrolled
const nameRef = useRef();
<input ref={nameRef} defaultValue="" />

Leggere il valore all'invio

Con gli input non controllati, legga il valore quando l'utente invia il modulo accedendo a `ref.current.value`. Durante la digitazione dell'utente non vengono effettuati aggiornamenti dello stato.

function Form() {
  const nameRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

defaultValue e value

Per gli input non controllati, utilizzi `defaultValue` (non `value`) per impostare il valore iniziale. Impostare `value` senza `onChange` fa visualizzare un avviso a React e rende l'input di sola lettura.

<input ref={nameRef} defaultValue="Initial text" />

Quando usare gli input non controllati

Gli input non controllati sono utili per: moduli semplici in cui servono i valori solo all'invio, input di file (che non possono essere controllati da React) e input per i quali le prestazioni sono cruciali e occorre evitare nuovi rendering.

Reimpostare un input non controllato

Per reimpostare un input non controllato, imposti imperativamente `ref.current.value = ''`. In alternativa, modifichi la prop `key` del componente per costringere React a montarlo nuovamente con un nuovo nodo DOM.

// Reset imperatively
nameRef.current.value = '';

// Or remount
setFormKey(k => k + 1);
<input key={formKey} ref={nameRef} />

Più ref per più input

Per i moduli con più campi non controllati, crei un ref separato per ogni input. All'invio, acceda al valore `.current.value` di ciascun ref.

const emailRef = useRef();
const passwordRef = useRef();

<input ref={emailRef} type="email" />
<input ref={passwordRef} type="password" />

Messa a fuoco al montaggio

useRef viene spesso usato per mettere automaticamente a fuoco un input quando viene montato un componente. Legga il ref all'interno di useEffect dopo il montaggio.

const inputRef = useRef();
useEffect(() => {
  inputRef.current?.focus();
}, []);
<input ref={inputRef} />

Input non controllati e validazione

La validazione degli input non controllati richiede la lettura imperativa dei valori all'invio. Per la validazione in tempo reale è più macchinosa rispetto agli input controllati. Preferisca gli input controllati quando è necessario fornire un feedback immediato.

Il compromesso di useRef

Gli input non controllati evitano nuovi rendering, ma rinunciano alla reattività di React. Non può eseguire il rendering condizionale in base al valore dell'input in tempo reale senza leggere il ref e aggiornare manualmente lo stato.

Verifica rapida

Quale prop dovrebbe utilizzare per impostare il valore iniziale di un input non controllato in React?

Riepilogo

Gli input non controllati utilizzano i ref per leggere i valori quando necessario. Utilizzi defaultValue per impostare i valori iniziali, legga ref.current.value all'invio e reimposti l'input cancellando il valore del ref o modificando key.

Prossima lezione

Prossima lezione: **Input di file e lettura dei dati dei file** — gestirà gli input di file e leggerà i metadati e i dati delle immagini con FileReader.

Domande Frequenti

La lezione «Input non controllati con useRef» è gratuita?

Sì — il testo completo di «Input non controllati con useRef» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Input non controllati con useRef»?

Accedere ai valori degli input del DOM tramite ref invece dello state per semplici moduli. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Input non controllati con useRef»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a React Academy