03. Kreiranje forme - kristijan-perkovic96/Osnove-reacta GitHub Wiki

Kao što je navedeno u prethodnom poglavlju da se s obje vrste komponenti može dobiti jednaka funkcionalnost to ćemo prikazati i sa formom. Kako bismo kreirali formu potrebne su nam varijable u koje ćemo spremiti unesene vrijednost i metode za obradu događaja ukoliko gledamo s programske strane, također kako bismo mogli popuniti te varijable potrebno je kreirati input polja te gumb koji će pozvati metodu ukoliko se klikne na njega.

Kao što smo ranije naveli potrebne su nam varijable unutar kojih ćemo spremiti vrijednosti iz unosnih polja. To se unutar komponenti postiže korištenjem state-a. Ukoliko unutar klasne komponente u konstruktor napišemo this.state={} tada unutar vitičastih zagrada možemo definirati varijable te njihove inicijalne vrijednosti. Unutar koda ćete vidjeti da stoji linija super(); ona je također jako bitna jer inače ne možete koristiti this. Za izmjene vrijednosti varijabli u klasnoj komponeti koristi se metoda setState() te se u njoj navodi ime varijable i nova vrijednost varijable.

Primjer klasne komponente:

Kao što je ranije navedeno naše varijable se nalaze 8-11 liniji koda, metoda za izmjenu vrijednosti se nalazi na liniji 19-23. Return nam vraća prikaz forme te smo stavili dva html input elementa i povezali s našim varijablama value={this.state.varijabla} , također smo definirali i metode koje će se pozvati na onChange event onChange={(e)=>this.setInputValue(e.target.value,'ime')}.

Primjer funkcijske komponente:

Funkcijska komponenta je malo kraća po pisanju koda. U ovome slučaju kako bismo koristili state moramo koristiti hook useState const [ime,setIme]=useState(''); Unutuar [] prvi argument nam je naziv varijable, dok drugi argument nam je naziv metode koja vrši izmjene nad tom varijablom. Unutar () zagrada se nalazi inicijalno stanje. Možete zamijetiti da se ostatak koda ne razlikuje mnogo od klasne komponente.

Obrada događaja se vrši na način da se definiraju metode koje će se pozvati ukoliko se dogodi neki događaj. Razlika između poziva onChange i onClick je ta što smo u jednom slučaju unutar () zagrada napisali e što može da vas zbuni, no razlog je taj što e predstavlja event te nam je potreban kako bismo dohvatili vrijednost koja je unesena s tipkovnice u unosno polje, dok nam iz eventa ništa nije potrebno ukoliko se klikne na gumb (tj. ništa ne koristimo iz njega).

Unesimo u unosna polja ime i prezime te pritisnimo gumb.