Додавање форме у 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