React formas un kontrolētie komponenti…

Pārlūkojot internetu, pastāv liela iespēja, ka nonāksiet veidlapā, jeb ievades formā pat, ja to iespējams  nepamanīsiet. No vienkāršas e-pasta ievades un biļetenu abonēšanas līdz sarežģītākām formām, piemēram, konta izveidei iecienītākajā sociālo mediju platformā , formas ir visur. Iespējams, jūs regulāri ieviesīsiet tās savās lietojumprogrammās.

Šajā rakstā jūs uzzināsiet par React kontrolēto komponentu jēdzienu un to, kā tie tiek izmantoti formu procesos.

• Controlled components in React

HTML veidlapu pamatjēdzieni un tas, kā forumus var izveidot kā React komponentus.

• HTML forms

Runājot par React lietojumprogrammām, HTML veidlapas darbojas atšķirīgi no citiem DOM elementiem.

Atcerēties, ka DOM ir loģiska kokam līdzīga struktūra, kas attēlo HTML dokumentu, un tā izmanto mezglus, lai aprakstītu dažādas dokumenta daļas.

Tradicionālās HTML veidlapas

Tradicionālās HTML veidlapas saglabā noteiktu iekšējo stāvokli DOM, un to iesniegšanas laikā tām ir noteikta noklusējuma darbība. Tas parasti tiek darīts, izmantojot darbības atribūtu, kas norāda uz galapunktu, kas apstrādās pieprasījumu. Bet ko darīt, ja vēlaties detalizētāku kontroles līmeni?

Piemērs:

<form action="/konta_izveidosana.php">

<label>

Vārds:
<input type="text" name="name" />

</label>

<input type="submit" value="Sūtīt" />

</form>

Piemēram, lai restorāna klienti var rezervēt galdiņu vietnē, izmantojot veidlapu. Iedomājieties, ja būtu funkcija, kas varētu apstrādāt veidlapas iesniegšanu un piekļūt datiem, ko lietotājs tajā ievadījis. Šeit tiek izmantoti kontrolētie komponenti. Kontrolētie komponenti ir komponentu kopa, kas piedāvā deklaratīvu lietojumprogrammu saskarni vai API, (declaritive application programming interface ) kas ļauj pilnībā kontrolēt veidlapas elementu stāvokli jebkurā brīdī, izmantojot React state.

onCharge Callback – atzvanīšana

Tā vietā, lai paļautos uz DOM elementu sākotnējo stāvokli, React state tiek padarīts par vienu patiesības avotu, kas visu laiku kontrolē jūsu veidlapas elementu parādīto vērtību. Veids, kā jūs veicat šo stāvokļa deleģēšanu, tiek izmantots, izmantojot vērtību propu (value prop). Vērtība ir īpašs rekvizīts, ko React pievieno lielākajai daļai veidlapas elementu, lai noteiktu ievades saturu jebkurā renderēšanas dzīves cikla brīdī. Lai izveidotu kontrolētu komponentu, ir jāizmanto Local state un Value prop kombinācija. Sākotnēji vērtības īpašumam piešķirsiet Value prop. Bet kā iegūt atjauninājumus no jebkuras jaunas teksta rakstzīmes, kas ievadītas formas logā? Lai to izdarītu, jums ir nepieciešams otrs atbalsts, lai pabeigtu kontrolētā komponenta dizainu — onChange callback. OnChange callback saņem notikuma parametru, kas ir notikuma objekts, kas attēlo darbību, kas tikko notika, līdzīgi notikumiem DOM elementos. Lai iegūtu jauno vērtību no katra taustiņsitiena, jums ir jāpiekļūst mērķa rekvizītam (piemērā: setValue(event.target.value); )no notikuma un jāsatver šī objekta vērtība, kas ir virkne.

onChange callback piemērs:

handleChange(event) {

setValue(event.target.value);

}

Visbeidzot, lai kontrolētu veidlapas vērtības ikreiz, kad veidlapa tiek iesniegta, formas HTML elementā varat izmantot rekvizītu onSubmit.

<form onSubmit={handleSubmit}>

...

</form>

handleSubmit(event) {

validate(value);

event.preventDefault();

}

OnSubmit – nosūtīšana

OnSubmit callback kā parametru saņem arī DOM līdzīgu notikumu. Šeit varat piekļūt savām veidlapas vērtībām, lai veiktu jebkuru vēlamo loģiku, kas jāveic pirms iesniegšanas, piemēram, lai apstiprinātu ievades vērtības. Turklāt, ja vēlaties novērst noklusējuma HTML veidlapas darbību, onSubmit callback ietvaros ir jāizsauc event.preventDefault();.

Ievada nobeigums

Nu, lūk. Jūs esat atklājis paņēmienu, ko sauc par kontrolētiem komponentiem, kas ļauj ieslēgt React kā patiesības avotu jūsu veidlapas ievades stāvoklim. React piedāvā kontrolētas versijas lielākajai daļai ievades veidu un iesaka izmantot kontrolētos komponentus forumu ieviešanai. Tomēr ņemiet vērā, ka joprojām ir daži formas elementi, kas joprojām ir nekontrolēti, līdzīgi kā to DOM ekvivalenti.

Šajā raksta daļā jūs guvāt ievadu un uzzinājāt par kontrolēto komponentu un React jēdzienu un to, kā tie tiek izmantoti ārējos procesos. Jūs arī izpētījāt HTML formu pamatjēdzienus un to, kā veidlapas var izveidot kā React komponentus.

Turpinājumā:

Kontrolētie komponenti pret Nekontrolētajiem komponentiem

Šajā raksta daļā jūs iemācīsieties strādāt ar nekontrolētām ievadēm programmā React un kontrolētu ieeju priekšrocības, izmantojot stāvokļa plānošanu. Jūs arī uzzināsiet, kad izvēlēties kontrolētas vai nekontrolētas ievades, un funkcijas, ko atbalsta katra opcija.

Vairumā gadījumu React iesaka izmantot kontrolētos komponentus veidlapu ieviešanai. Lai gan šī pieeja atbilst React deklaratīvajam modelim, nekontrolēti veidlapas lauki joprojām ir derīga iespēja, un tiem ir savas priekšrocības. Sadalīsim tās, lai redzētu atšķirības starp abām pieejām un to, kad jāizmanto katra metode.

Nekontrolētas ievades

Nekontrolētas ievades ir kā standarta HTML veidlapas ievades:

const Form = () => { 
 return ( 
   <div> 
     <input type="text" /> 
   </div> 
 ); 
}; 

const Form = () => { 
 const inputRef = useRef(null); 


 const handleSubmit = () => { 
   const inputValue = inputRef.current.value; 
   // Dari kautko ar doto vērtību
 } 
 return ( 
   <form onSubmit={handleSubmit}> 
     <input ref={inputRef} type="text" /> 
   </form> 
 ); 
}; 

Citiem vārdiem sakot, jums ir jāizvelk vērtība no lauka, kad nepieciešams.

Nekontrolēti komponenti ir vienkāršākais veids, kā ieviest veidlapas ievades. Viņiem noteikti ir vērtīgi gadījumi, it īpaši, ja jūsu forma ir vienkārša. Diemžēl tie nav tik spēcīgi kā to līdzinieki, tāpēc tālāk apskatīsim kontrolētās ievades.

Kontrolētās ievades

Kontrolētās ievades pieņem to pašreizējo vērtību kā atbalstu un atzvanu (callback), lai mainītu šo vērtību. Tas nozīmē, ka ievades vērtībai kaut kur ir jādzīvo reaģēšanas stāvoklī. Parasti komponents, kas atveido ievadi (piemēram, veidlapas komponents), saglabā to savā state:

const Form = () => { 
 const [value, setValue] = useState(""); 


 const handleChange = (e) => { 
   setValue(e.target.value) 
 } 


 return ( 
   <form> 
     <input 
       value={value} 
       onChange={handleChange} 
       type="text" 
     /> 
   </form> 
 ); 
}; 

const Form = () => { 
 const fileInput = useRef(null); 


 const handleSubmit = (e) => { 
   e.preventDefault(); 
   const files = fileInput.current.files; 
   // Dari kautko ar failiem šeit 
 } 


 return ( 
   <form onSubmit={handleSubmit}> 
     <input 
       ref={fileInput} 
       type="file" 
     /> 
   </form> 
 ); 
}; 

Un tas šajā rakstā ir viss par kontrolētām un nekontrolētām sastāvdaļām. Jūs esat detalizēti uzzinājis par katru opciju, kad izvēlēties vienu vai otru, un, visbeidzot, atbalstīto funkciju salīdzinājumu.