Προσθήκη Γεγονότων σε JSX

Ας μελετήσουμε τώρα την εργασία με γεγονότα στο React. Για παράδειγμα, ας κάνουμε έτσι ώστε με κλικ σε ένα block να εμφανίζεται alert με κάποιο κείμενο.

Ας υποθέσουμε ότι έχουμε τη συνάρτηση showMess, που εμφανίζει alert με ένα μήνυμα, και στον HTML κώδικα υπάρχει ένα κουμπί, upon click στο οποίο θα θέλαμε να βλέπουμε αυτό το alert:

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

Ας δέσουμε στο κουμπί μας το γεγονός onclick έτσι ώστε upon click σε αυτό το div να ενεργοποιείται η συνάρτηση 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>;
}

Κάντε έτσι ώστε upon click στο πρώτο κουμπί να ενεργοποιείται η πρώτη συνάρτηση, και upon click στο δεύτερο κουμπί - η δεύτερη συνάρτηση.