Добавяне на форма в 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>

Напишете сами кода за двата оставащи инпута за цена и количество с id 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