Reduxda shakl qo'shish

O'tgan darsda biz shakldagi kirish maydonlari uchun faqat bitta komponent ichida ishlaydigan holatlarni qo'llash mumkinligini bilib oldik va bo'sh shakl yaratdik.

Keling, form teglari ichida ma'lumot kiritiladigan har bir maydon uchun verstkani joylashtiramiz. Birinchi input bizga mahsulot nomi uchun javobgar bo'ladi va uning verstkasi quyidagicha bo'ladi:

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

Ikkinchisi bizda mahsulot tavsifi uchun textarea bo'ladi:

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

Narx va miqdor uchun qolgan ikkita inputning kodini productPrice va productAmount id lariga ega bo'lgan holda o'zingiz yozing.

To'rtta kirish maydonidan keyin, yopiluvchi form tegidan oldin saqlash uchun tugma qo'shing:

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

Bizning shaklli komponentimiz tayyor. Keling uni bosh sahifada ko'rsatamiz. Buning uchun root.jsx faylini ochamiz, unga komponentni import qilamiz:

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

Va uni hr tegi va ProductsList komponenti o'rtasiga quyidagicha joylashtiramiz:

<hr></hr>
<NewProductForm />
<ProductsList />

Ilovamizni ishga tushiramiz va shakl va mahsulotlar ro'yxatiga qaraymiz. index.css ga yana uslublar kiritamiz:

#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;
}

Talabalar bilan ilovangizni oching. Darsda ko'rsatilgandek, shaklingiz uchun verstka qiling.

Tugallangan NewStudentForm komponentini bosh sahifaga StudentsList dan oldin qo'shing