Kompromissit, ref-mallit ja oletusarvot
Verratkaa kontrolloituja ja kontrolloimattomia syötekenttiä, käyttäkää ref-viittauksia lukemiseen ja antakaa järkevät oletusarvot.
Kompromissit, ref-mallit ja oletusarvot on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/2. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 2 oppituntia.
Kontrolloitu ja kontrolloimaton
Tavoite: Valitkaa sopiva syötekentän hallintatapa.
- Kontrolloitu: arvo on tilassa; tila renderöidään uudelleen muutoksen yhteydessä
- Kontrolloimaton: DOM säilyttää arvon; lukekaa arvo tarvittaessa ref-viitteen avulla
- Oletusarvot: defaultValue, defaultChecked
Erot yhdellä silmäyksellä
- Kontrolloitu: sopii hyvin reaaliaikaiseen validointiin, maskeihin ja muiden kenttien synkronointiin
- Kontrolloimaton: vähemmän renderöintejä; sopii yksinkertaisiin lomakkeisiin, jotka luetaan vain lähetyksen yhteydessä
- Yhdistelmä: käyttäkää kontrolloitua hallintaa tärkeissä kentissä ja kontrolloimatonta valinnaisissa
Esimerkki: kontrolloitu syötekenttä
Kontrolloidun kentän value tallennetaan tilaan, ja arvo päivitetään jokaisen muutoksen yhteydessä.
<div id="root"></div>
Esimerkki: kontrolloimaton kenttä ref-viitteellä
Kontrolloimaton kenttä käyttää DOM:n arvoa, jonka luemme tarvittaessa ref-viitteen avulla.
<div id="root"></div>
Oletusarvot ja milloin käyttää kontrolloitua kenttää
Käyttäkää defaultValue- ja defaultChecked-arvoja kontrolloimattomien kenttien oletusarvoina. Vaihtakaa kontrolloituun hallintaan, kun tarvitsette reaaliaikaisia sääntöjä.
<div id="root"></div>
Vinkit ja sudenkuopat
- Älkää yhdistäkö value- ja defaultValue-arvoja samaan syötekenttään
- Lukekaa kontrolloimattomat arvot ref-viitteillä
- Valitkaa kontrolloitu hallinta, kun käyttöliittymän pitää reagoida jokaiseen näppäinpainallukseen
Kontrolloidun ja kontrolloimattoman kentän testi
Kertaus
Kertaus: Käyttäkää kontrolloitua hallintaa reaaliaikaisiin sääntöihin ja johdettuun tilaan sekä kontrolloimatonta hallintaa yksinkertaisiin lomakkeisiin, joiden arvot luetaan vain lähetyksen yhteydessä. Lukekaa arvot ref-viitteen avulla ja käyttäkää defaultValue-arvoa alkusisällön määrittämiseen.
Opi React tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 88
- Oppitunnit
- 324
Usein kysytyt kysymykset
Onko oppitunti ”Kompromissit, ref-mallit ja oletusarvot” ilmainen?
Kyllä – oppitunnin ”Kompromissit, ref-mallit ja oletusarvot” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 2 oppituntia.
Mitä opin oppitunnilla ”Kompromissit, ref-mallit ja oletusarvot”?
Verratkaa kontrolloituja ja kontrolloimattomia syötekenttiä, käyttäkää ref-viittauksia lukemiseen ja antakaa järkevät oletusarvot. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/2.
Kuinka kauan ”Kompromissit, ref-mallit ja oletusarvot”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?
Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Kompromissit, ref-mallit ja oletusarvot
- Prop getterit ja tilareducer (kevyt)