Додавање догађаја у JSX

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

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

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

Хајде да вежемо за наше дугме догађај onclick тако да при клику на овај див се активира функција 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>;
}

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