Додавање на настани во JSX

Ајде сега да ја проучиме работата со настани во React. На пример, да направиме така што при клик на блокот да се прикаже alert со одреден текст.

Нека имаме функција showMess, која прикажува alert со порака, а во HTML кодот има копче, при клик на кое ние би сакале да го видиме овој alert:

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

Ајде да ја поврземе нашата копчка со настанот onclick така што при клик на ова div да се активира функцијата showMess. За ова треба да се додаде атрибутот onClick (точно во camelCase, односно onClick, а не onclick), а во него да се наведе функцијата која ќе се изврши при овој настан:

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

На овој начин се одвива работата со настани: се додава атрибут (на пример, onClick или onFocus), како вредност на атрибутот се наведува методот кој ќе се повика при тој настан.

Даден е следниот код:

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

Направете така што при клик на првото копче да се активира првата функција, а при клик на второто копче - втората функција.