Hantera händelser i JSX

Låt oss nu studera hur man arbetar med händelser i React. Till exempel, låt oss göra så att ett alert med viss text visas vid klick på ett block.

Låt oss säga att vi har en funktion showMess som visar ett alert med ett meddelande, och i HTML-koden finns en knapp som vi vill ska visa detta alert när vi klickar på den:

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

Låt oss knyta händelsen onclick till vår knapp så att funktionen showMess triggas när man klickar på denna div. För att göra detta behöver du lägga till attributet onClick (specifikt i camelCase, det vill säga onClick, inte onclick), och i det ange funktionen som ska köras vid denna händelse:

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

Så här fungerar arbete med händelser: ett attribut läggs till (till exempel onClick eller onFocus), och värdet på attributet anges som metoden som kommer att anropas vid den händelsen.

Följande kod ges:

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

Gör så att den första funktionen triggas vid klick på den första knappen och den andra funktionen triggas vid klick på den andra knappen.