Melekatkan Peristiwa dalam JSX

Mari kita kaji kerja dengan peristiwa dalam React. Sebagai contoh, mari kita buat supaya apabila diklik pada blok, alert dengan beberapa teks dipaparkan.

Katakan kita mempunyai fungsi showMess, yang memaparkan alert dengan mesej, dan dalam kod HTML terdapat butang, yang apabila diklik, kita ingin melihat alert ini:

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

Mari kita ikat peristiwa onclick kepada butang kita supaya apabila klik pada div ini, fungsi showMess akan dipicu. Untuk ini, kita perlu tambahkan atribut onClick (tepat dalam camelCase, iaitu onClick, bukan onclick), dan di dalamnya nyatakan fungsi yang akan dilaksanakan apabila peristiwa ini berlaku:

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

Demikianlah cara kerja dengan peristiwa: tambahkan atribut (contohnya, onClick atau onFocus), nilai atribut dinyatakan sebagai kaedah yang akan dipanggil apabila peristiwa itu berlaku.

Diberi kod berikut:

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

Buat supaya apabila klik pada butang pertama, fungsi pertama dipicu, dan apabila klik pada butang kedua - fungsi kedua dipicu.