Textarea kezelése Reactben

Tanuljuk meg most, hogyan kell dolgozni a többsoros beviteli mezővel, a textarea-val. A Reactben a munka vele, a kényelem érdekében, hasonlóvá lett téve a szöveges input mezővel való munkához. Az tiszta JS-től eltérően, a Reactben a textarea-hoz nincs szükség lezáró tagre, és a szövegét a value attribútumban kell elhelyezni.

Nézd a példát:

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

Rövidített formában:

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

A textarea-ba szöveg legyen bevihető. Úgy kell elrendezni, hogy a beírt szöveg transliterált változata jelenjen meg a bekezdésben.

A textarea minden sorába számokat lehet beírni. Úgy kell elrendezni, hogy a bevitel során a beírt számok összege jelenjen meg a bekezdésben.