Gebeurtenisbehandeling in JSX

Kom ons bestudeer nou die hantering van gebeurtenisse in React. Laat ons byvoorbeeld maak dat 'n klik op 'n blok 'n alert met 'n sekere teks vertoon.

Veronderstel ons het 'n funksie showMess wat 'n alert met 'n boodskap vertoon, en in die HTML- kode is daar 'n knoppie waarop ons graag wil dat hierdie alert verskyn wanneer daarop geklik word:

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

Kom ons koppel die gebeurtenis onclick aan ons knoppie sodat die funksie showMess afgevuur word wanneer op hierdie div geklik word. Om dit te doen, moet ons die attribuut onClick byvoeg (presies in camelCase, dit wil sê onClick, en nie onclick nie), en daarin die funksie spesifiseer wat by hierdie gebeurtenis uitgevoer moet word:

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

So werk die hantering van gebeurtenisse: 'n Attribuut word bygevoeg (byvoorbeeld onClick of onFocus), en die waarde van die attribuut is die metode wat by daardie gebeurtenis geroep sal word.

Die volgende kode word gegee:

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

Maak so dat die eerste funksie afgevuur word by 'n klik op die eerste knoppie, en die tweede funksie by 'n klik op die tweede knoppie.