Додавање форме у Redux-у
На прошлом часу смо сазнали да за поља уноса форме можемо користити стејтове који ће радити само унутар једне компоненте, и направили смо празну форму.
Хајде да унутар тагова form поставимо верстак
за свако поље у које ће се уносити
информација. Први инпут ће бити за назив производа и његов верстак
ће бити овакав:
<form>
<p>
<label htmlFor="productName">Назив:</label>
<input
id="productName"
name="productName"
value={name}
onChange={onNameChanged}
/>
</p>
</form>
Други ће бити textarea за опис
производа:
<p>
<label htmlFor="productDesc">Опис:</label>
<textarea
id="productDesc"
name="productDesc"
value={desc}
onChange={onDescChanged}
/>
</p>
Напишите сами код за два преостала инпута
за цену и количину са ајдијем productPrice и
productAmount редом.
После сва четири поља уноса пре
затварајућег тага form додајте
дугме за чување:
<button type="button">сачувај</button>
Наша компонента са формом је спремна. Хајде да је прикажемо
на главној страници. За то отворимо
фајл root.jsx, увезимо у њега компоненту:
import { NewProductForm } from '../parts/products/NewProductForm'
И убацимо је између тага hr и
компоненте ProductsList овако:
<hr></hr>
<NewProductForm />
<ProductsList />
Покренимо нашу апликацију и позадивимо се
форми и списку производа. Додајмо
још стилова у 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;
}
Отворите вашу апликацију са студентима. Направите верстак за вашу форму, као што је приказано на часу.
Додајте завршену компоненту NewStudentForm
на главну страницу испред StudentsList