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 файлын ашып, оған компонентті импорттаймыз:

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

Студенттеріңізбен қолданбаңызды ашыңыз. Сабақта көрсетілгендей, формаңыз үшін верстка жасаңыз.

Дайын NewStudentForm компонентін басты бетке StudentsList компонентінің алдында қосыңыз