Tapahtumien kytkeminen JSX:ssä

Opitaan nyt työskentelemään tapahtumien kanssa Reactissa. Tehdään esimerkiksi niin, että klikkaamalla diviä näytetään alert jollain tekstillä.

Oletetaan, että meillä on funktio showMess, joka näyttää alert viestillä, ja HTML- koodissa on painike, jota klikkaamalla haluaisimme nähdä tämän alertn:

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

Kytketään painikkeellemme tapahtuma onclick niin, että tätä diviä klikkaamalla suoritetaan funktio showMess. Tätä varten tarvitaan attribuutti onClick (juuri camelCase-muodossa, eli onClick, eikä onclick), ja siihen määritetään funktio, joka suoritetaan kyseisen tapahtuman yhteydessä:

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

Näin tapahtumien kanssa työskentely tapahtuu: lisätään attribuutti (esimerkiksi onClick tai onFocus), attribuutin arvoksi määritetään metodi, joka kutsutaan kyseisen tapahtuman yhteydessä.

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