JSX-də Hadisələrin Əlavə Edilməsi

Gəlin indi React-da hadisələrlə işi öyrənək. Məsələn, edək ki, bloka klik edildikdə müəyyən mətnlə alert çıxsın.

Tutaq ki, bizim showMess funksiyamız var, hansı ki, mesajla alert göstərir, və HTML kodunda bir düymə var, ona klik edildikdə biz həmin alert-i görmək istəyirik:

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

Gəlin düyməmizə onclick hadisəsini elə bağlayaq ki, həmin div-ə klik edildikdə showMess funksiyası işləsin. Bunun üçün onClick atributu əlavə etmək lazımdır (məhz camelCase ilə, yəni onClick, onclick yox), və onun içinə həmin hadisə baş verəndə işləyəcək funksiyanı yazmaq lazımdır:

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

Beləliklə, hadisələrlə iş aparılır: atribut əlavə olunur (məsələn, onClick və ya onFocus), atributun dəyəri kimi isə həmin hadisə baş verəndə çağırılacaq metod göstərilir.

Aşağıdakı kod verilib:

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

Elə edin ki, birinci düyməyə klik edildikdə birinci funksiya işləsin, ikinci düyməyə klik edildikdə isə ikinci funksiya işləsin.