მოვლენების დამატება 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>;
}

გააკეთეთ ისე, რომ პირველ ღილაკზე დაწკაპუნებისას გაეშვეს პირველი ფუნქცია, ხოლო მეორე ღილაკზე დაწკაპუნებისას - მეორე ფუნქცია.