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>;
}

Бірінші батырманы нұққанда бірінші функция, ал екінші батырманы нұққанда екінші функция іске қосылатын етіңіз.