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

Биринчи тугма босилганда биринчи функсия ишлаши, иккинчи тугма босилганда эса иккинчи функсия ишлашини таъминланг.