Իվենթների կցում JSX-ում

Եկեք այժմ ուսումնասիրենք իրադարձությունների հետ աշխատանքը React-ում: Օրինակ, եկեք անենք, որ բլոկի վրա կտտացնելիս ցուցադրվի alert որոշակի տեքստով:

Ենթադրենք, մենք ունենք showMess ֆունկցիա, որը ցուցադրում է alert հաղորդագրությամբ, իսկ HTML կոդում կա կոճակ, որի վրա կտտացնելուց մենք կցանկանայինք տեսնել այդ alert-ը:

function App() {
	function showMess() {
		alert('բարև');
	}
	
	return <div>
		<button>show</button>
	</div>;
}

Եկեք կապենք մեր կոճակին onclick իրադարձությունը այնպես, որ այս դիվի վրա կտտացնելիս աշխատի showMess ֆունկցիան: Դրա համար անհրաժեշտ է ավելացնել onClick ատրիբուտը (հենց camelCase-ով, այսինքն onClick, և ոչ onclick), իսկ դրա մեջ նշել այն ֆունկցիան, որը կկատարվի այս իրադարձության դեպքում:

function App() {
	function showMess() {
		alert('բարև');
	}
	
	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>;
}

Կատարեք այնպես, որ առաջին կոճակի վրա կտտացնելիս աշխատի առաջին ֆունկցիան, իսկ երկրորդ կոճակի վրա կտտացնելիս՝ երկրորդ ֆունկցիան: