Avveininger, ref-mønstre og standardverdier
Sammenlign kontrollerte og ukontrollerte inndata, bruk refs til lesing, og angi fornuftige standardverdier.
Avveininger, ref-mønstre og standardverdier er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 av 2. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 2 leksjoner.
Kontrollerte kontra ukontrollerte
Mål: Velg riktig input-stil.
- Kontrollert: value ligger i state; komponenten rendres på nytt ved endringer
- Ukontrollert: DOM-en beholder value; les den ved behov via ref
- Standardverdier: defaultValue, defaultChecked
Avveininger i korte trekk
- Kontrollert: utmerket for validering i sanntid, masker og synkronisering av andre felt
- Ukontrollert: færre rendringer; enkelt for skjemaer som bare leses ved innsending
- Bland: bruk kontrollert for nøkkelfelt og ukontrollert for valgfrie felt
Demo: kontrollert input
Et kontrollert felt lagrer value i state og oppdaterer den ved hver endring.
<div id="root"></div>
Demo: ukontrollert med ref
Et ukontrollert felt bruker DOM-ens value; vi leser den med en ref når det trengs.
<div id="root"></div>
Standardverdier og når du bør bruke kontrollert
Bruk defaultValue/defaultChecked for standardverdier i ukontrollerte felt. Bytt til kontrollert når du trenger regler i sanntid.
<div id="root"></div>
Tips og fallgruver
- Ikke bland value og defaultValue på samme input
- Bruk refs til å lese verdier fra ukontrollerte felt
- Velg kontrollert når grensesnittet reagerer på hvert tastetrykk
Kontrollert kontra ukontrollert – test
Oppsummering
Oppsummering: Bruk kontrollert for regler i sanntid og avledet state, og ukontrollert for enkel lesing ved innsending. Bruk ref til å lese verdier og defaultValue for opprinnelig innhold.
Lær deg React med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 88
- Leksjoner
- 324
Ofte stilte spørsmål
Er leksjonen «Avveininger, ref-mønstre og standardverdier» gratis?
Ja – hele teksten i «Avveininger, ref-mønstre og standardverdier» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 2 leksjoner.
Hva lærer jeg i «Avveininger, ref-mønstre og standardverdier»?
Sammenlign kontrollerte og ukontrollerte inndata, bruk refs til lesing, og angi fornuftige standardverdier. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Academy?
Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 2.
Hvor lang tid tar leksjonen «Avveininger, ref-mønstre og standardverdier»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?
Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Avveininger, ref-mønstre og standardverdier
- Prop-gettere og tilstandsreduksjon (lett variant)