Προσθήκη φόρμας στο Redux

Στο προηγούμενο μάθημα μάθαμε ότι για τα πεδία εισόδου μιας φόρμας μπορούμε να εφαρμόσουμε states, που θα λειτουργούν μόνο μέσα σε ένα component, και δημιουργήσαμε μια κενή φόρμα.

Ας τοποθετήσουμε μέσα στις ετικέτες form τη σήμανση για κάθε πεδίο, στο οποίο θα εισάγεται πληροφορία. Το πρώτο input θα απαντά για το όνομα του προϊόντος και η σήμανσή του θα είναι έτσι:

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

Το δεύτερο θα είναι ένα textarea για την περιγραφή του προϊόντος:

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

Γράψτε μόνοι σας τον κώδικα για τα δύο εναπομείναντα inputs για την τιμή και την ποσότητα με id productPrice και productAmount αντίστοιχα.

Μετά από όλα τα τέσσερα πεδία εισαγωγής πριν από την ετικέτα κλεισίματος form προσθέστε ένα κουμπί για αποθήκευση:

<button type="button">save</button>

Το component μας με τη φόρμα είναι έτοιμο. Ας το εμφανίσουμε στην κύρια σελίδα. Για αυτό ας ανοίξουμε το αρχείο root.jsx, να εισάγουμε σε αυτό το component:

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

Και να το εισάγουμε ανάμεσα στην ετικέτα hr και το component 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;
}

Ανοίξτε την εφαρμογή σας με τους μαθητές. Κάντε τη σήμανση για τη φόρμα σας, όπως φαίνεται στο μάθημα.

Προσθέστε το ολοκληρωμένο component NewStudentForm στην κύρια σελίδα πριν από το StudentsList