Hendelsesbinding i JSX

La oss nå studere arbeid med hendelser i React. For eksempel, la oss gjøre det slik at ved klikk på en blokk vises det en alert med en viss tekst.

Anta at vi har en funksjon showMess som viser en alert med en melding, og i HTML-koden er det en knapp som vi ønsker at skal vise denne alerten når vi klikker på den:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

La oss knytte en onclick-hendelse til knappen vår slik at funksjonen showMess utføres når du klikker på denne div-en. For å gjøre dette må du legge til attributtet onClick (nettopp i camelCase, altså onClick, ikke onclick) og i det spesifisere funksjonen som skal utføres ved denne hendelsen:

function App() {
	function showMess() {
		alert('hello');
	}
	
	return <div>
		<button onClick={showMess}>show</button>
	</div>;
}

Slik fungerer arbeid med hendelser: et attributt legges til (for eksempel onClick eller onFocus), og verdien til attributtet angir metoden som vil bli kalt ved denne hendelsen.

Følgende kode er gitt:

function App() {
	function show1() {
		alert(1);
	}
	
	function show2() {
		alert(2);
	}
	
	return <div>
		<button>act1</button>
		<button>act2</button>
	</div>;
}

Gjør slik at den første funksjonen utløses ved klikk på den første knappen, og den andre funksjonen utløses ved klikk på den andre knappen.