Reactiivinen tila Reactissa

Katsotaan nyt, miten reactiivisuus toimii. Se saa aikaan sen, että kun tilaa muutetaan, muutokset näkyvät välittömästi ruudulla.

Katsotaan esimerkkiä. Oletetaan, että meillä on tila tuotteen nimelle:

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

Esitetään tuotteen nimi HTML-muotoilussa:

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

Tehdään nyt painike, jota painamalla tilamme muuttuu:

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

Klikinkäsittelijässä käytämme funktiota setName asettaaksemme tuotteelle uuden nimen:

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

Kootaan kaikki koodimme yhteen. Käy niin, että painiketta painettaessa teksti muuttuu välittömästi uudeksi arvoksi:

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

Eristen käsittelijäfunktioiden käyttö ei ole pakollista. Voit käyttää nimetöntä nuolifunktiota:

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

Annettu tila käyttäjän etu- ja sukunimelle. Esitä ne HTML-muotoilussa. Tee painikkeet näiden tilojen muuttamiseksi.