ReactJS - Programmazione dei Form

Ciao, aspiranti programmatori! Oggi esploreremo l'eccitante mondo della programmazione dei form in ReactJS. Come il tuo amico insegnante di scienze informatiche del quartiere, sono qui per guidarti in questo viaggio passo dopo passo. Allora, prenditi una tazza di caffè (o la tua bevanda preferita) e iniziamo!

Cos'è un Form in ReactJS?

Prima di immergerci nel codice, capiamo cos'è un form e perché è importante. I form sono come i guardiani dell'input degli utenti nelle applicazioni web. Consentono agli utenti di interagire con la nostra app, fornendo informazioni che possiamo poi elaborare e utilizzare. In React, i form sono un po' speciali perché mantengono il loroown stato. Questo significa che dobbiamo gestirli in modo diverso rispetto ad altri elementi.

Le Basi della Gestione dei Form

Iniziamo con un esempio di form semplice:

import React, { useState } from 'react';

function SimpleForm() {
const [name, setName] = useState('');

const handleSubmit = (event) => {
event.preventDefault();
alert('Un nome è stato inviato: ' + name);
}

return (
<form onSubmit={handleSubmit}>
<label>
Nome:
<input type="text" value={name} onChange={e => setName(e.target.value)} />
</label>
<input type="submit" value="Invia" />
</form>
);
}

Analizziamo questo codice:

1. Importiamo useState da React per gestire lo stato del nostro form.
2. Creiamo una variabile di stato name e una funzione setName per aggiornarla.
3. La funzione handleSubmit impedisce la提交 predefinita del form e mostra un alert con il nome inviato.
4. Nel form, impostiamo il value dell'input sul nostro stato name e utilizziamo onChange per aggiornare lo stato quando l'input cambia.

Questo è il cuore della gestione dei form in React. Stiamo controllando lo stato del form con React, è per questo che chiamiamo questo un "componente controllato".

Gestione di Multipli Input

Cosa succede se abbiamo più input? Dobbiamo creare un stato separato per ognuno? Non necessariamente! Esaminiamo un form più complesso:

import React, { useState } from 'react';

function MultipleInputForm() {
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
email: ''
});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('Form inviato:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
value={formData.firstName}
onChange={handleChange}
placeholder="Nome"
/>
<input
type="text"
name="lastName"
value={formData.lastName}
onChange={handleChange}
placeholder="Cognome"
/>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
<button type="submit">Invia</button>
</form>
);
}

In questo esempio, utilizziamo un singolo oggetto di stato per gestire tutti i nostri campi del form. La funzione handleChange utilizza l'attributo name dell'input per aggiornare il campo corretto nel nostro stato. Questo approccio funziona bene man mano che i nostri form diventano più grandi.

Gestione di Diversi Tipi di Input

I form non riguardano solo gli input di testo. Vediamo come possiamo gestire diversi tipi di input:

import React, { useState } from 'react';

function DiverseForm() {
const [formData, setFormData] = useState({
name: '',
age: '',
gender: '',
isStudent: false,
favoriteColor: 'blue'
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;
setFormData(prevState => ({
...prevState,
[name]: type === 'checkbox' ? checked : value
}));
}

const handleSubmit = (event) => {
event.preventDefault();
console.log('Form inviato:', formData);
}

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Nome"
/>
<input
type="number"
name="age"
value={formData.age}
onChange={handleChange}
placeholder="Età"
/>
<select name="gender" value={formData.gender} onChange={handleChange}>
<option value="">Seleziona Sesso</option>
<option value="male">Maschio</option>
<option value="female">Femmina</option>
<option value="other">Altro</option>
</select>
<label>
<input
type="checkbox"
name="isStudent"
checked={formData.isStudent}
onChange={handleChange}
/>
Sei uno studente?
</label>
<fieldset>
<legend>Colore Preferito</legend>
<label>
<input
type="radio"
name="favoriteColor"
value="red"
checked={formData.favoriteColor === 'red'}
onChange={handleChange}
/>
Rosso
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="blue"
checked={formData.favoriteColor === 'blue'}
onChange={handleChange}
/>
Blu
</label>
<label>
<input
type="radio"
name="favoriteColor"
value="green"
checked={formData.favoriteColor === 'green'}
onChange={handleChange}
/>
Verde
</label>
</fieldset>
<button type="submit">Invia</button>
</form>
);
}

Questo form dimostra la gestione di vari tipi di input: testo, numero, select, checkbox e pulsanti radio. La chiave è nella funzione handleChange, che verifica il tipo di input e aggiorna lo stato di conseguenza.

Validazione del Form

Nessun form è completo senza una validazione. Aggiungiamo alcune validazioni di base al nostro form:

import React, { useState } from 'react';

function ValidatedForm() {
const [formData, setFormData] = useState({
username: '',
email: '',
password: ''
});

const [errors, setErrors] = useState({});

const handleChange = (event) => {
const { name, value } = event.target;
setFormData(prevState => ({
...prevState,
[name]: value
}));
}

const validateForm = () => {
let newErrors = {};
if (!formData.username) newErrors.username = 'Il nome utente è obbligatorio';
if (!formData.email) {
newErrors.email = 'L\'email è obbligatoria';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = 'L\'email non è valida';
}
if (!formData.password) {
newErrors.password = 'La password è obbligatoria';
} else if (formData.password.length < 6) {
newErrors.password = 'La password deve essere lunga almeno 6 caratteri';
}
return newErrors;
}

const handleSubmit = (event) => {
event.preventDefault();
const newErrors = validateForm();
if (Object.keys(newErrors).length > 0) {
setErrors(newErrors);
} else {
console.log('Form inviato:', formData);
// Qui invieresti tipicamente i dati a un server
}
}

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Nome Utente"
/>
{errors.username && <span className="error">{errors.username}</span>}
</div>
<div>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Password"
/>
{errors.password && <span className="error">{errors.password}</span>}
</div>
<button type="submit">Invia</button>
</form>
);
}

In questo esempio, abbiamo aggiunto una funzione validateForm che verifica i campi vuoti evalida la formato dell'email e la lunghezza della password. Archiviamo eventuali errori in un oggetto di stato separato e li visualizziamo sotto i campi pertinenti.

Conclusione

Eccoci! Abbiamo coperto le basi della gestione dei form in React, dai semplici input di testo ai form più complessi con vari tipi di input e validazione. Ricorda, la pratica fa la perfezione. Prova a costruire i tuoi form, esperimenta con diversi tipi di input e non aver paura di fare errori - è così che impariamo!

Ecco una tabella di riepilogo dei metodi che abbiamo utilizzato:

Metodo	Scopo
useState	Per creare e gestire lo stato nei componenti funzionali
onChange	Per gestire i cambiamenti negli input dei form
onSubmit	Per gestire l'invio del form
preventDefault	Per impedire il comportamento predefinito dell'invio del form

Buon codice e che i tuoi form siano sempre user-friendly e privi di bug!

Credits: Image by storyset