Dodavanje forme u Redux
Na prošloj lekciji smo saznali da se za polja unosa forme mogu primeniti stejtovi, koji će raditi samo unutar jedne komponente, i kreirali smo praznu formu.
Hajde unutar tagova form postavimo verstatku
za svako polje, u koje će se unositi
informacija. Prvi input će biti zadužen
za naziv proizvoda i njegova verzija
biće ovakva:
<form>
<p>
<label htmlFor="productName">Naziv:</label>
<input
id="productName"
name="productName"
value={name}
onChange={onNameChanged}
/>
</p>
</form>
Drugi će biti textarea za opis
proizvoda:
<p>
<label htmlFor="productDesc">Opis:</label>
<textarea
id="productDesc"
name="productDesc"
value={desc}
onChange={onDescChanged}
/>
</p>
Napišite sami kod za dva preostala inputa
za cenu i količinu sa ID productPrice i
productAmount respektivno.
Posle sva četiri polja unosa, pre
zatvarajućeg taga form dodajte
dugme za čuvanje:
<button type="button">sačuvaj</button>
Naša komponenta sa formom je spremna. Hajde da je prikažemo
na glavnoj stranici. Za to ćemo otvoriti
fajl root.jsx, importovati u njega komponentu:
import { NewProductForm } from '../parts/products/NewProductForm'
I ubaciti je između taga hr i
komponente ProductsList ovako:
<hr></hr>
<NewProductForm />
<ProductsList />
Pokrenimo našu aplikaciju i uživajmo
u formi i listi proizvoda. Unesimo
još stilova u index.css:
#main-page {
max-width: 600px;
}
select,
textarea,
input,
button {
font-size: 18px;
}
form {
margin-bottom: 20px;
border-bottom: 2px solid lightgray;
padding-bottom: 10px;
}
form p {
margin: 5px;
}
Otvorite vašu aplikaciju sa studentima. Napravite verstatku za vašu formu, kao što je prikazano na lekciji.
Dodajte gotovu komponentu NewStudentForm
na glavnu stranicu pre StudentsList