Ձևի ավելացում 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-ից առաջ