Formos pridėjimas į Redux

Ankstesnėje pamokoje mes sužinojome, kad formos įvesties laukams galima pritaikyti būsenas, kurios veiks tik vieno komponento viduje, ir sukūrėme tuščią formą.

Įterpkime viduje form žymų išdėstymą kiekvienam laukui, į kurį bus įvedama informacija. Pirmasis įvesties laukas atsakingas už produkto pavadinimą ir jo išdėstymas bus toks:

<form>
	<p>
		<label htmlFor="productName">Pavadinimas:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

Antrasis bus textarea produkto aprašymui:

<p>
	<label htmlFor="productDesc">Aprašymas:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

Parašykite patys kodą dviem likusiems įvesties laukams kainai ir kiekiai su id productPrice ir productAmount atitinkamai.

Po visų keturių įvesties laukų prieš uždarantį form žymę pridėkite mygtuką išsaugojimui:

<button type="button">išsaugoti</button>

Mūsų komponentas su forma yra paruoštas. Atvaizduokime jį pagrindiniame puslapyje. Tam atidarykime failą root.jsx, importuokime į jį komponentą:

import { NewProductForm } from '../parts/products/NewProductForm'

Ir įterpkime jį tarp hr žymės ir komponento ProductsList taip:

<hr></hr>
<NewProductForm />
<ProductsList />

Paleiskime mūsų programą ir pasigrožėkime forma ir produktų sąrašu. Įveskime dar stilių į 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;
}

Atidarykite savo studentų programą. Padarykite savo formos išdėstymą, kaip parodyta pamokoje.

Pridėkite užbaigtą komponentą NewStudentForm į pagrindinį puslapį prieš StudentsList