Дадаванне формы ў Redux

На мінулым уроке мы даведаліся, што для палёў уводу формы можна ўжыць стэйты, якія будуць працаваць толькі ўнутры аднаго кампанента, і стварылі пустую форму.

Давайце ўнутры тэгаў form размясцім вёрстку для кожнага поля, у якое будзе ўносіцца інфармацыя. Першы інпут у нас будзе адказваць за назву прадукту і яго вёрстка будзе такой:

<form>
	<p>
		<label htmlFor="productName">Name:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

Другім у нас будзе textarea для апісання прадукту:

<p>
	<label htmlFor="productDesc">Description:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Напішыце самі код для двух якія засталіся інпутаў для цаны і колькасці з айды productPrice і productAmount адпаведна.

Пасля ўсіх чатырох палёў уводу перад зачыняльным тэгам form дадайце кнопку для захавання:

<button type="button">save</button>

Наш кампанент з формай гатовы. Давайце адлюструем яго на галоўнай старонцы. Для гэтага адчынiм файл root.jsx, імпартуем у яго кампанент:

import { NewProductForm } from '../parts/products/NewProductForm'

I ўставім яго паміж тэгам 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;
}

Адчынiце ваша прыкладанне са студэнтамі. Зрабіце вёрстку для вашай формы, як паказана ў уроку.

Дадайце скончаны кампанент NewStudentForm на галоўную старонку перад StudentsList