Εργασία με το textarea στο React

Ας μάθουμε τώρα πώς να δουλεύουμε με ένα πεδίο εισόδου πολλών γραμμών textarea. Στο React, η εργασία με αυτό, για ευκολία, έχει γίνει παρόμοια με την εργασία με ένα κειμενικό input. Σε αντίθεση με το καθαρό JS, στο React στο textarea δεν χρειάζεται το tag κλεισίματος, και το κείμενό του πρέπει να τοποθετείται στο χαρακτηριστικό value.

Δείτε το παράδειγμα:

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

Σε συνοπτική μορφή:

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

Ας εισάγεται κείμενο στο textarea. Κάντε έτσι ώστε στην παράγραφο να εμφανίζεται το translit του κειμένου που εισάγεται.

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