Kuidas töötada vormide, sisendite ja sündmustega reaalajas

See on katkend raamatust React Quickly, mis on kättesaadav saidil manning.com

Selles artiklis käsitletakse tekstisisestuse ja sisestuse jäädvustamist muude vorminguelementide, näiteks , ja kaudu. Nendega töötamine on veebiarenduse jaoks ülitähtis, kuna need võimaldavad meie rakendustel saada kasutajatelt andmeid (nt teksti) ja toiminguid (nt klõpse).

Soovituslik viis vormidega töötamiseks Reaktis

Tavalises HTML-is, kui töötame sisestuselemendiga, säilitab lehe DOM selle elemendi väärtuse oma DOM-sõlmes. Väärtusele on juurde pääseda selliste meetodite abil nagu: document.getElementById ('email') või kasutades jQuery meetodeid. DOM on meie ladu.

Reaktoris on arendajatel vormide või muude kasutaja sisestusväljadega (nt eraldiseisvad tekstiväljad või nupud) töötades huvitav probleem lahendada. Reaketi dokumentatsioonist: “React komponendid peavad esindama vaate seisu igal ajahetkel, mitte ainult initsialiseerimise ajal.” React eesmärk on hoida asi lihtsana, kasutades kasutajaliideste kirjeldamiseks deklaratiivset stiili. React kirjeldab kasutajaliidest, selle lõppjärku ja seda, kuidas see peaks välja nägema.

Kas oskate konflikti märgata? Traditsiooniliste HTML-vorminguelementide korral muutub elementide olek kasutaja sisestusega. React kasutab kasutajaliidese kirjeldamisel deklaratiivset lähenemisviisi. Sisend peab olema dünaamiline, et olukorda õigesti kajastada.

Kui arendajad EI soovi komponendi olekut (JavaScriptis) säilitada ega sünkroonida seda vaatega, tekitab see probleeme - võib tekkida olukord, kus sisemine olek ja vaade on erinevad ning Reakt ei tea muutunud olekust. See võib põhjustada igasuguseid probleeme ja leevendada Reaketi lihtsat filosoofiat. Parim tava on hoida Reacti renderdus () võimalikult lähedal tegelikule DOM-ile ja see hõlmab andmeid vormielementides.

Vaatleme seda tekstisisestusvälja näidet. React peab selle komponendi renderdusse () lisama uue väärtuse. Järelikult peame väärtuse abil oma elemendi väärtuse määrama uuele väärtusele. Kui rakendame välja nagu HTML-is alati, hoiab React renderdamist () sünkroonis tegeliku DOM-iga. Reaktsioon ei luba kasutajatel väärtust muuta. Proovige ise järele. See võib tunda pähklit, kuid see on Reaketi jaoks sobiv käitumine!

renderdama () {
  return 
}

Ülaltoodud kood tähistab vaadet mis tahes olekus ja väärtus on alati “Mr.”. Sisestusväljadega peavad need muutuma vastavalt kasutaja klahvivajutustele. Arvestades neid punkte, muutkem väärtus dünaamiliseks.

See on parem teostus, kuna seda värskendatakse olekust:

renderdama () {
  return 
}

Mis on riigi väärtus? Reakt ei tea, kuidas kasutajad vormi elemente kirjutavad. Arendajad peavad rakendama sündmuste käitleja, et onChange'iga muudatusi hõivata.

handleChange (sündmus) {
  this.setState ({pealkiri: event.target.value})
}
renderdama () {
  return 
}

Neid punkte arvesse võttes on arendajate jaoks parim tava rakendada sisemise oleku ja vaatega sünkroonimiseks järgmisi asju (joonis 1):

1. Defineerige elemendid renderduses (), kasutades oleku väärtusi.

2. Jäädvustage vormielemendi muudatused, kasutades onChange (), nagu nad juhtuvad.

3. Värskendage sündmuste käitleja sisemist olekut.

4. Uued väärtused salvestatakse olekus ja seejärel värskendatakse vaadet uue renderdusega ().

Joonis 1: Sisendi muutuste jäädvustamine ja olekule rakendamine

Esmapilgul võib see tunduda palju tööd, kuid loodan, et kasutades Reakti rohkem, hindate seda lähenemist. Seda nimetatakse ühesuunaliseks köitmiseks, kuna olek muudab ainult vaateid. Tagasisõitu pole, see on ainult ühesuunaline reis osariigist vaatesse. Ühesuunalise köitmise korral ei värskendata raamatukogu olekut (ega mudelit) automaatselt. Ühesuunalise sidumise üks peamisi eeliseid on see, et see eemaldab keerukuse, kui töötab suurte rakendustega, kus paljud vaated saavad vaikimisi värskendada paljusid olekuid (andmemudeleid) ja vastupidi - joonis 2.

Lihtne ei tähenda alati vähem koodi. Mõnikord, nagu antud juhul, peavad arendajad kirjutama lisakoodi, et seada sündmuste käitlejatelt saadud andmed käsitsi olekusse (mis kuvatakse vaatamiseks). Kuid see lähenemisviis kipub olema parem, kui tegemist on keerukate kasutajaliideste ja üheleheliste rakendustega, millel on lugematu arv vaateid ja olekuid. Lühidalt öeldes: lihtne pole alati lihtne.

Joonis 2: Ühesuunaline või kahesuunaline sidumine

Vastupidi, kahesuunaline sidumine võimaldab vaadetel olekuid automaatselt muuta, ilma et arendajad seda selgesõnaliselt rakendaksid. Nurga 1 toimimine on kahesuunaline sidumine. Huvitav on see, et Angular 2 laenas Reactilt ühesuunalise köitmise kontseptsiooni ja muutis selle vaikeseadeks (saate selgesõnaliselt kasutada kahesuunalist köitmist).

Sel põhjusel käsitleme kõigepealt vormidega töötamise soovitatud lähenemisviisi. Seda nimetatakse kontrollitavateks komponentideks ja see tagab, et sisemise komponendi olek on alati vaatega sünkroonis. Alternatiivne lähenemisviis on kontrollimatu komponent.

Siiani oleme Reactis sisestusväljadega töötamise parimat tava õppinud - see on muudatuse jäädvustamine ja selle rakendamine olekule, nagu on kujutatud joonisel 1 (sisend muudetud vaatesse). Järgnevalt vaatame, kuidas määratleme vormi ja selle elemente.

Vormi ja selle sündmuste määratlemine reageerides

Alustame elemendiga

. Tavaliselt ei soovi me, et meie sisestuselemendid ripuksid juhuslikult DOM-i. See võib muutuda halvaks, kui meil on palju funktsionaalselt erinevaid sisendikomplekte. Selle asemel mähime elementi
sisestuselemente, millel on ühine eesmärk.

ümbrise omamine pole vajalik. Vormielementide kasutamine lihtsate kasutajaliidestena on täiesti tore. Keerukamates kasutajaliidestes võib arendajatel ühel lehel olla mitu elementide rühma. Sel juhul on mõistlik kasutada rühma

. Reaketi renderdatakse HTML -vormis ja mis tahes reeglid, mida rakendame ka Reaketi elemendi suhtes. HTML5 spetsifikatsiooni kohaselt ei tohiks arendajad vorme pesastada (see ütleb, et sisu on voosisu, kuid ilma elementide järeltulijateta).

Vormielemendil endal võib olla sündmusi. React toetab lisaks tavalistele React DOM-i sündmustele ka vormingus kolme sündmust:

  • onChange: vallandatakse, kui mõne vormi sisestuselementi on muudetud.
  • onInput: tulekahjud iga muutuse korral