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

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

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

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

Ας δέσουμε στο κουμπί μας το γεγονός onclick έτσι ώστε upon click σε αυτό το div να ενεργοποιείται η συνάρτηση showMess. Για αυτό πρέπει να προσθέσετε το χαρακτηριστικό onClick (ακριβώς σε camelCase, δηλαδή onClick, και όχι onclick), και σε αυτό να ορίσετε τη συνάρτηση που θα εκτελεστεί σε αυτό το γεγονός:

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

Έτσι λοιπόν λειτουργεί η εργασία με γεγονότα: προσθέτετε ένα χαρακτηριστικό (για παράδειγμα, onClick ή onFocus), ως τιμή του χαρακτηριστικού ορίζεται η μέθοδος που θα κληθεί σε αυτό το γεγονός.

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