Lavorare con gli input in React

Il lavoro con gli input in React avviene utilizzando gli stati. Ad ogni input viene assegnato il proprio stato, che contiene il value dell'input.

Vediamo un esempio. Supponiamo di avere un input:

function App() {
	return <div>
		<input />
	</div>;
}

Supponiamo inoltre di avere uno stato:

function App() {
	const [value, setValue] = useState('testo');
	
	return <div>
		<input />
	</div>;
}

Colleghiamo il nostro stato all'attributo value dell'input:

function App() {
	const [value, setValue] = useState('testo');
	
	return <div>
		<input value={value} />
	</div>;
}

In questo caso, quando lo stato cambia, il testo dell'input cambierà reattivamente.

Tuttavia, questo produce un interessante effetto collaterale: ora, quando si esegue il codice nel browser, è impossibile modificare il testo nell'input! Perché: perché quando si inserisce il testo nell'input, lo stato value non cambia, di conseguenza, il testo nell'input non dovrebbe cambiare.

Provalo tu stesso. Copia il mio codice ed eseguilo sul tuo computer. Prova a modificare il testo nell'input - non riuscirai a farlo. Apri la console del browser - vedrai un avviso di React in essa. Questo avviso ci indica che abbiamo collegato lo stato all'input, ma così facendo abbiamo bloccato l'input.

Facciamo in modo che sia possibile inserire il testo nel nostro input. Per fare ciò, dobbiamo fare in modo che durante l'inserimento, il nostro stato cambi con il valore corrente dell'input.

Per cominciare, dobbiamo aggiungere all'input l'evento onChange:

function App() {
	const [value, setValue] = useState('testo');
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Questo evento in React si comporta in modo diverso rispetto al JS puro. In React si attiva immediatamente quando l'input cambia. Cioè all'inserimento o alla cancellazione di un carattere.

Aggiungiamo ora il gestore del nostro evento:

function App() {
	const [value, setValue] = useState('testo');
	
	function handleChange() {
		
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

In questo gestore, dobbiamo leggere il testo corrente dell'input e impostarlo nello stato utilizzando la funzione setValue.

Il problema è che this di questa funzione non punterà al nostro input - questa è una caratteristica di React. Per ottenere l'elemento in cui si è verificato l'evento, dobbiamo usare event.target:

function App() {
	const [value, setValue] = useState('testo');
	
	function handleChange(event) {
		console.log(event.target); // riferimento all'elemento DOM dell'input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Visualizziamo il testo corrente dell'input utilizzando event.target:

function App() {
	const [value, setValue] = useState('testo');
	
	function handleChange(event) {
		console.log(event.target.value); // testo corrente dell'input
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

E ora scriviamo il testo dell'input nel nostro stato:

function App() {
	const [value, setValue] = useState('testo');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Ora possiamo inserire il testo nell'input. In questo modo lo stato value conterrà sempre il testo corrente dell'input.

Possiamo facilmente verificarlo. Visualizziamo il contenuto del nostro testo in un paragrafo. In questo caso, durante l'inserimento del testo nell'input, il testo inserito apparirà automaticamente nel paragrafo:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
		<p>testo: {value}</p>
	</div>;
}

Possiamo riscriverlo in una versione più compatta con una funzione freccia anonima:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<input value={value} onChange={event => setValue(event.target.value)} />
		<p>testo: {value}</p>
	</div>;
}

Pertanto, per far funzionare qualsiasi input abbiamo bisogno di quanto segue: creare uno stato per questo input, collegare lo stato all'attributo value dell'input, aggiungere l'evento onChange all'input, nel gestore dell'evento cambiare lo stato dell'input con il suo testo.

Queste operazioni dovranno essere eseguite per ogni input. Cioè, se hai due input, allora avrai due stati e due funzioni gestori dell'evento onChange.

Crea due input. Lascia che il testo del primo input venga visualizzato nel primo paragrafo, e il testo del secondo input - nel secondo paragrafo.