Formanin Redux-a elavesi

Kecen derste biz oyrendik ki, formanin daxil etme saheleri ucun yalnız bir komponent daxilinde işleyecek state-ler tetbiq etmek olar, ve bos forma yaratdıq.

Gelin form teqleri daxilinde melumat daxil edilecek her bir sahe ucun verstece yerleşdirek. Ilk input bizim mehsulun adına cavabdeh olacaq ve onun verstekasi bele olacaq:

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

Ikincimiz mehsulun tesviri ucun textarea olacaq:

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

Qalan iki input ucun ozunuz productPrice ve productAmount uygun olaraq ayd ile kod yazın.

Daxil etmenin dord sahesinden sonra bağlanan form teqinden evvel saxlamaq ucun düymə elave edin:

<button type="button">saxla</button>

Forma ile komponentimiz hazırdır. Gelin onu esas sehifede gosterek. Bunun ucun root.jsx faylını açacagıq, ora komponenti import edek:

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

Ve onu hr teqi ile ProductsList komponenti arasına bele yerləşdirek:

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

Tetbiqimizi işe salaq ve formaya ve mehsul siyahısına heyran olaq. Gelin index.css faylına daha bir üslub elave edek:

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

Telebe lerinizle tetbiqinizi açın. Dersde gosterildiyi kimi, formanız ucun verstekası hazırlayın.

Bitmiş NewStudentForm komponentini esas sehifede StudentsList den evvel yerleşdirin