JSX da hodisalarni biriktirish

Keling, endi React da hodisalar bilan ishlashni o'rganaylik. Masalan, blokni bosganda ma'lum bir matn bilan alert chiqaradigan qilaylik.

Faraz qilaylik, bizda showMess funksiyasi bor, u xabar bilan alert chiqaradi, va HTML kodida tugma bor, unga bosganda biz shu alert ni ko'rishni xohlaymiz:

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

Keling, tugmamizga onclick hodisasini bog'laylik, shundayki ushbu div ni bosganda showMess funksiyasi ishga tushsin. Buning uchun onClick atributini qo'shish kerak (aynan camelCase da, ya'ni onClick, onclick emas), va unga shu hodisa bo'yicha bajariladigan funksiyani ko'rsatish kerak:

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

Shu tarzda hodisalar bilan ishlash amalga oshiriladi: atribut qo'shiladi (masalan, onClick yoki onFocus), atribut qiymatida ushbu hodisa bo'yicha chaqiriladigan metod ko'rsatiladi.

Quyidagi kod berilgan:

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

Birinchi tugma bosilganda birinchi funksiya ishlashi, ikkinchi tugma bosilganda esa ikkinchi funksiya ishlashi uchun sozlang.