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>

Қолган иккита инпут учун нарх ва миқдор учун мос равишда productPrice ва productAmount айдилари билан кодни ўзингиз ёзинг.

Тўртта кириш майдонидан кейин form ёпилувчи тег олдига сақлаш тугмаси қўйинг:

<button type="button">сақлаш</button>

Бизнинг шаклли компонент тайёр. Келинг уни бош саҳифада кўрсатамиз. Бунинг учун root.jsx файлини ochамиз, унга компонентни импорт қиламиз:

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

Сизнинг талабалар билан иловани ochинг. Дарсда кўрсатилганидек, шаклингиз учун верстка қилинг.

Тайёр бўлган NewStudentForm компонентини бош саҳифага StudentsList олдига қўшинг