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 ден мурун