Aggiunta di un modulo in Redux

Nella lezione precedente abbiamo appreso che per i campi di input del modulo possiamo utilizzare stati che funzioneranno solo all'interno di un singolo componente, e abbiamo creato un modulo vuoto.

All'interno dei tag form posizioniamo il markup per ogni campo in cui verranno inserite le informazioni. Il primo input sarà responsabile per il nome del prodotto e il suo markup sarà così:

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

Il secondo sarà un textarea per la descrizione del prodotto:

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

Scrivi tu stesso il codice per i due input rimanenti per prezzo e quantità con id productPrice e productAmount rispettivamente.

Dopo tutti e quattro i campi di input, prima del tag di chiusura form, aggiungi un pulsante per salvare:

<button type="button">salva</button>

Il nostro componente con il modulo è pronto. Visualizziamolo nella pagina principale. Per fare questo apriamo il file root.jsx, importiamo il componente in esso:

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

E inseriamolo tra il tag hr e il componente ProductsList in questo modo:

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

Avviamo la nostra applicazione e ammiriamo il modulo e l'elenco dei prodotti. Aggiungiamo ancora alcuni stili in 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;
}

Apri la tua applicazione con gli studenti. Crea il markup per il tuo modulo, come mostrato nella lezione.

Aggiungi il componente completato NewStudentForm nella pagina principale prima di StudentsList