Redux-a forma goşmak

Öňki sapakda biz formanyň girizilýän meýdanlary üçin diňe bir komponent içinde işleýän steýtleri ulanmak bolýandygyny öwrendik we boş forma döretdik.

Geliň form tegleriniň içinde her bir maglumat girizilýän meýdan üçin wersiýa ýerleşdireli. Birinji input bizim önümiň adyna jogap berer we onuň wersiýasy şeýle bolar:

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

Ikinjisi bizde önümiň düşündirişi üçin textarea bolar:

<p>
	<label htmlFor="productDesc">Düşündiriş:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Özüňiz bahasy we mukdary üçin galan iki input üçin kody ýazyň, degişlilikde productPrice we productAmount ID-leri bilen.

Dört girizilýän meýdandan soň ýapyjy form teginden öň saklamak üçin knopka goşuň:

<button type="button">sakla</button>

Formasy bilen komponentimiz taýar. Geliň ony baş sahypada görkezeliň. Munuň üçin root.jsx faýlyny açarys, ona komponenti import ederis:

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

We ony hr tegi bilen ProductsList komponentiniň arasynda şeýle goşarys:

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

Programmany işledeliň we forma we önümleriň sanawyna göz aýlanyş edeliň. index.css faýlyna ýene-de stilleri goşalyň:

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

Talyp programmanyňyzy açyň. Sapakda görkezilişi ýaly formanyňyz üçin wersiýa ýasalyň.

Taýar komponent NewStudentForm-i baş sahypada StudentsList komponentinden öň goşuň