React Academy · Lektion

Okontrollerade indatafält med useRef

Åtkom DOM-indata via refs i stället för state i enkla formulärscenarier.

Lektion 1 av 413 steg

Okontrollerade indatafält med useRef är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen använder ni okontrollerade inmatningsfält med useRef för att komma åt värden i DOM-inmatningsfält utan att hantera dem i React-state.

Kontrollerade och okontrollerade inmatningsfält

Ett **kontrollerat inmatningsfält** har ett värde som styrs av React-state (value + onChange). Ett **okontrollerat inmatningsfält** hanterar sitt eget värde i DOM:en; React läser det via en ref endast när det behövs.

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

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

Läs värdet vid skickning

Med okontrollerade inmatningsfält läser ni värdet när användaren skickar formuläret genom att komma åt `ref.current.value`. Inga state-uppdateringar sker medan användaren skriver.

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 jämfört med value

För okontrollerade inmatningsfält ska ni använda `defaultValue` (inte `value`) för att ange startvärdet. Om ni anger `value` utan `onChange` varnar React och inmatningsfältet blir skrivskyddat.

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

När ska ni använda okontrollerade inmatningsfält?

Okontrollerade inmatningsfält är användbara för: enkla formulär där ni bara behöver värdena när formuläret skickas, filinmatningsfält (som inte kan kontrolleras av React) och prestandakritiska inmatningsfält där det är viktigt att undvika omrenderingar.

Återställ ett okontrollerat inmatningsfält

Återställ ett okontrollerat inmatningsfält genom att imperativt ange `ref.current.value = ''`. Ni kan också ändra komponentens `key`-prop för att tvinga React att montera om den med en ny DOM-nod.

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

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

Flera refs för flera inmatningsfält

Skapa en separat ref för varje inmatningsfält i formulär med flera okontrollerade fält. Kom åt varje refs `.current.value` när formuläret skickas.

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

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

Fokusera vid montering

useRef används ofta för att automatiskt fokusera ett inmatningsfält när en komponent monteras. Läs refen i useEffect efter monteringen.

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

Okontrollerade inmatningsfält och validering

För att validera okontrollerade inmatningsfält måste ni läsa värdena imperativt när formuläret skickas. Det är mer omständligt än med kontrollerade inmatningsfält vid validering i realtid. Föredra kontrollerade inmatningsfält när ni behöver omedelbar återkoppling.

Avvägningen med useRef

Okontrollerade inmatningsfält undviker omrenderingar men ni avstår från Reacts reaktivitet. Ni kan inte villkorsstyrt rendera baserat på inmatningsvärdet i realtid utan att läsa refen och uppdatera state manuellt.

Snabb kontroll

Vilken prop ska ni använda för att ange ett startvärde för ett okontrollerat inmatningsfält i React?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Okontrollerade inmatningsfält använder refs för att läsa värden vid behov. Använd defaultValue för att ange startvärden, läs ref.current.value när formuläret skickas och återställ genom att rensa ref-värdet eller ändra key.

Nästa

Nästa lektion: **Filinmatning och läsning av fildata** — ni kommer att hantera filinmatningsfält samt läsa metadata och bilddata med FileReader.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Okontrollerade indatafält med useRef” gratis?

Ja – hela texten till ”Okontrollerade indatafält med useRef” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Okontrollerade indatafält med useRef”?

Åtkom DOM-indata via refs i stället för state i enkla formulärscenarier. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Okontrollerade indatafält med useRef”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Okontrollerade indatafält med useRef
Filindata och läsa fildata
Gränssnitt för filuppladdning med dra och släpp
Ladda upp filer till ett backend-API

← Tillbaka till React Academy