Додавање на форма во 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