React Academy · Lektion

Ukontrollerede inputs med useRef

Tilgå DOM-inputværdier via refs i stedet for state i enkle formularscenarier.

Lektion 1 af 413 trin

Ukontrollerede inputs med useRef er en gratis React Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion bruger du ukontrollerede inddatafelter sammen med useRef til at tilgå værdier i DOM-inddatafelter uden at styre dem i React-tilstanden.

Kontrolleret kontra ukontrolleret

Et **kontrolleret inddatafelt** har en værdi, der styres af React-tilstanden (value + onChange). Et **ukontrolleret inddatafelt** styrer selv sin værdi i DOM'en; React læser den kun via en ref, når der er brug for den.

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

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

Læs værdien ved indsendelse

Med ukontrollerede inddatafelter læser du værdien, når brugeren indsender formularen, ved at tilgå `ref.current.value`. Der sker ingen opdateringer af tilstanden, mens brugeren 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 kontra value

For ukontrollerede inddatafelter skal du bruge `defaultValue` (ikke `value`) til at angive startværdien. Hvis du angiver `value` uden `onChange`, viser React en advarsel, og inddatafeltet bliver skrivebeskyttet.

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

Hvornår du skal bruge ukontrollerede inddatafelter

Ukontrollerede inddatafelter er nyttige til: enkle formularer, hvor du kun har brug for værdierne ved indsendelse, filinddatafelter (som ikke kan styres af React) og inddatafelter, hvor ydeevnen er kritisk, og det er vigtigt at undgå genrenderinger.

Nulstilling af et ukontrolleret inddatafelt

Hvis du vil nulstille et ukontrolleret inddatafelt, skal du imperativt sætte `ref.current.value = ''`. Du kan også ændre komponentens `key`-prop for at tvinge React til at montere den igen med en ny DOM-node.

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

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

Flere refs til flere inddatafelter

I formularer med flere ukontrollerede felter skal du oprette en separat ref til hvert inddatafelt. Tilgå hver refs `.current.value` ved indsendelse.

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

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

Fokus ved montering

useRef bruges ofte til automatisk at fokusere et inddatafelt, når en komponent monteres. Læs ref'en i useEffect efter monteringen.

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

Ukontrollerede inddatafelter og validering

Validering af ukontrollerede inddatafelter kræver, at du læser værdierne imperativt ved indsendelse. Det er mere besværligt end med kontrollerede inddatafelter, hvis du vil validere løbende. Foretræk kontrollerede inddatafelter, når du har brug for øjeblikkelig feedback.

Afvejningen ved useRef

Ukontrollerede inddatafelter undgår genrenderinger, men du giver afkald på Reacts reaktivitet. Du kan ikke gengive noget betinget ud fra inddataværdien i realtid uden at læse ref'en og opdatere tilstanden manuelt.

Hurtigt tjek

Hvilken prop skal du bruge til at angive en startværdi for et ukontrolleret inddatafelt i React?

Besvar den i den interaktive lektion

Opsummering

Ukontrollerede inddatafelter bruger refs til at læse værdier efter behov. Brug defaultValue til at angive startværdier, læs ref.current.value ved indsendelse, og nulstil ved at rydde ref-værdien eller ændre key.

Næste

Næste lektion: **Filinddata og læsning af fildata** — du vil håndtere filinddatafelter og læse metadata og billeddata med FileReader.

Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Ukontrollerede inputs med useRef” gratis?

Ja — hele teksten til “Ukontrollerede inputs med useRef” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Ukontrollerede inputs med useRef”?

Tilgå DOM-inputværdier via refs i stedet for state i enkle formularscenarier. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Ukontrollerede inputs med useRef”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til React Academy