Dodawanie formularza do Redux

Na poprzedniej lekcji dowiedzieliśmy się, że dla pól wejściowych formularza można zastosować stany, które będą działać tylko wewnątrz jednego komponentu, i stworzyliśmy pusty formularz.

Wewnątrz znaczników form umieśćmy wersję dla każdego pola, do którego będzie wprowadzana informacja. Pierwszy input będzie odpowiadał za nazwę produktu i jego wersja będzie wyglądać tak:

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

Drugim będzie textarea do opisu produktu:

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

Napisz samodzielnie kod dla dwóch pozostałych inputów dla ceny i ilości z id productPrice i productAmount odpowiednio.

Po wszystkich czterech polach wejściowych przed znacznikiem zamykającym form dodaj przycisk do zapisywania:

<button type="button">zapisz</button>

Nasz komponent z formularzem jest gotowy. Wyświetlmy go na stronie głównej. W tym celu otwórzmy plik root.jsx, zaimportujmy do niego komponent:

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

I wstawmy go między znacznik hr i komponent ProductsList w ten sposób:

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

Uruchommy naszą aplikację i popatrzmy na formularz i listę produktów. Dodajmy jeszcze style do 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;
}

Otwórz swoją aplikację ze studentami. Wykaj wersję dla twojego formularza, jak pokazano na lekcji.

Dodaj gotowy komponent NewStudentForm na stronę główną przed StudentsList