Bemenetek kezelése Reactben

A bemenetek kezelése Reactben állapotok segítségével történik. Minden bemenethez hozzárendelünk egy állapotot, amely tartalmazza a bemenet value értékét.

Nézzünk egy példát. Tegyük fel, hogy van egy bemenetünk:

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

Tegyük fel továbbá, hogy van egy állapotunk:

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

Kössük hozzá az állapotunkat a bemenet value attribútumához:

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

Ebben az esetben az fog történni, hogy az állapot változásakor reaktívan megváltozik a bemenet szövege is.

Ennek azonban van egy érdekes mellékhatása: most, ha a kódot a böngészőben futtatjuk, a bemenetben lehetetlen megváltoztatni a szöveget! Miért: mert amikor szöveget írunk a bemenetbe, nem változik a value állapot, ennek megfelelően a szöveg a bemenetben sem változhat.

Próbáld ki magad. Másold le a kódomat és futtasd nálad. Próbáld megváltoztatni a szöveget a bemenetben - nem fog sikerülni. Nyisd meg a böngésző konzolját - egy React figyelmeztetést fogsz látni benne. Ez a figyelmeztetés arra utal, hogy kötöttünk egy állapotot a bemenethez, de ezzel blokkoltuk a bemenetet.

Tegyük úgy, hogy a bemenetünkbe lehessen szöveget beírni. Ehhez azt kell elérnünk, hogy beíráskor az állapotunk a bemenet aktuális értékére változzon.

Először is ehhez a bemenetre fel kell függesztenünk egy onChange eseményt:

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

Ez az esemény a Reactben másképp viselkedik a tiszta JS-hez képest. A Reactben azonnal elsül a bemenet változásakor. Vagyis egy karakter beírásakor vagy törlésekor.

Most adjuk hozzá az eseményünk kezelőjét:

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

Ebben a kezelőben ki kell olvasnunk a bemenet jelenlegi szövegét és be kell állítanunk az állapotba a setValue függvénnyel.

A probléma az, hogy a függvény this-je nem fog a bemenetünkre mutatni - ez a React sajátossága. Ahhoz, hogy megkapjuk az elemet, amiben az esemény történt, a event.target-et kell használnunk:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target); // hivatkozás a bemenet DOM elemére
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

Jelenítsük meg a event.target segítségével a bemenet jelenlegi szövegét:

function App() {
	const [value, setValue] = useState('text');
	
	function handleChange(event) {
		console.log(event.target.value); // a bemenet jelenlegi szövege
	}
	
	return <div>
		<input value={value} onChange={handleChange} />
	</div>;
}

És most írjuk be a bemenet szövegét az állapotunkba:

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

Most már tudunk szöveget beírni a bemenetbe. Eközben a value állapot mindig tartalmazni fogja a bemenet aktuális szövegét.

Ezt könnyen beláthatjuk. Jelenítsük meg az állapotunk szövegét egy bekezdésben. Ebben az esetben amikor szöveget írunk a bemenetbe, a beírt szöveg automatikusan meg fog jelenni a bekezdésben is:

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

Átírhatjuk egy tömörebb változatra név nélküli nyíl függvénnyel:

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

Tehát bármely bemenet működéséhez a következőkre van szükségünk: létrehozunk egy állapotot a bemenethez, hozzákötjük az állapotot a bemenet value attribútumához, felfüggesztünk egy onChange eseményt a bemenetre, az esemény kezelőjében megváltoztatjuk a bemenet állapotát a szövegére.

Ezeket a műveleteket minden egyes bemenettel el kell végeznünk. Vagyis, ha két bemeneted van, akkor két állapotod és két onChange eseménykezelő függvényed lesz.

Készíts két bemenetet. Az első bemenet szövege jelenjen meg az első bekezdésben, a második bemenet szövege pedig a második bekezdésben.