Reaktivitás az állapotokban Reactben

Most nézzük meg, hogyan működik a reaktivitás. Ez azt eredményezi, hogy az állapot megváltozásakor a változások azonnal megjelennek a képernyőn.

Nézzünk egy példát. Tegyük fel, hogy van egy állapotunk a termék nevével:

const [name, setName] = useState('prod');

Jelenítsük meg a termék nevét a felületben:

return <div>
	<span>{name}</span>
</div>;

Készítsünk most egy gombot, amelyre kattintva az állapotunk megváltozik:

return <div>
	<span>{name}</span>
	<button onClick={clickHandler}>btn</button>
</div>;

A kattintáskezelőben használjuk a setName függvényt, hogy beállítsuk a termék új nevét:

function clickHandler() {
	setName('xxxx');
}

Állítsuk össze az egész kódunkat. Az eredmény az lesz, hogy a gomb megnyomása után a szöveg azonnal lecserélődik az új értékre:

function App() {
	const [name, setName] = useState('prod');
	
	function clickHandler() {
		setName('xxxx');
	}
	
	return <div>
		<span>{name}</span>
		<button onClick={clickHandler}>btn</button>
	</div>;
}

A külön kezelőfüggvények használata nem kötelező. Használhatunk névtelen nyílfüggvényt is:

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
		<button onClick={() => setName('xxxx')}>btn</button>
	</div>;
}

Adottak a felhasználó kereszt- és vezetéknevét tároló állapotok. Jelenítsd meg őket a felületben. Készíts gombokat ezen állapotok megváltoztatásához.