Werken met textarea in React

Laten we nu leren werken met een invoerveld met meerdere regels textarea. In React is de werking ervan, voor het gemak, vergelijkbaar gemaakt met de werking van een tekstinvoerveld. In tegenstelling tot pure JS, heeft in React een textarea geen sluitende tag nodig, en moet de tekst ervan geplaatst worden in het attribuut value.

Zie het voorbeeld:

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 verkorte vorm:

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

Stel dat er tekst wordt ingevoerd in de textarea. Zorg ervoor dat in de paragraaf de transliteratie van de ingevoerde tekst wordt weergegeven.

Stel dat er getallen worden ingevoerd, elk op een regel, in de textarea. Zorg ervoor dat naarmate er wordt ingevoerd, de som van de ingevoerde getallen in de paragraaf wordt weergegeven.