Kuongeza Fomu kwenye Redux

Katika somo lililopita tulijifunza kuwa kwa sehemu za kuingiza data kwenye fomu tunaweza kutumia viwango ambavyo vitafanya kazi ndani ya kijenzi kimoja tu, na tukaunda fomu tupu.

Hebu ndani ya vitambulisho form tuweke muundo kwa kila sehemu, ambapo taarifa itaingizwa. Sehemu ya kwanza ya kuingizia itakuwa inahusika na jina la bidhaa na muundo wake utakuwa kama hii:

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

Ya pili itakuwa textarea kwa maelezo ya bidhaa:

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

Andika mwenyewe msimbo wa sehemu mbili zilizobaki za kuingizia kwa bei na kiasi zenye kitambulisho productPrice na productAmount mtawalia.

Baada ya sehemu zote nne za kuingizia kabla ya kitambulisho cha kufunga form ongeza kitufe cha kuhifadhi:

<button type="button">hifadhi</button>

Kijenzi chetu chenye fomu kimekwisha. Hebu tuonyeshe katika ukurasa kuu. Ili kufanya hivyo tufungue faili root.jsx, tuingize kijenzi hicho ndani yake:

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

Na tuingize kati ya kitambulisho hr na kijenzi ProductsList kama hivi:

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

Tuanzishe programu yetu na tuistarehe kwenye fomu na orodha ya bidhaa. Tuongeze mitindo zaidi kwenye 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;
}

Fungua programu yako ya wanafunzi. Fanya muundo wa fomu yako, kama ilivyoonyeshwa kwenye somo.

Ongeza kijenzi kilichokamilika NewStudentForm kwenye ukurasa kuu kabla ya StudentsList