Lavorare con textarea in React

Ora impariamo a lavorare con il campo di input multiriga textarea. In React, per comodità, il lavoro con esso è reso simile al lavoro con l'input di testo. A differenza del JS puro, in React in textarea non è necessario il tag di chiusura, e il suo testo deve essere posizionato nell'attributo value.

Guarda l'esempio:

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

In forma abbreviata:

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

Si supponga che in textarea venga inserito del testo. Fai in modo che nel paragrafo venga emesso il translitterato del testo inserito.

Si supponga che in textarea su ogni riga vengano inseriti dei numeri. Fai in modo che man mano che si inserisce, nel paragrafo venga emessa la somma dei numeri inseriti.