Hendelsesbinding i JSX

La oss nå studere arbeid med hendelser i React. For eksempel, la oss gjøre det slik at ved klikk på en blokk vises det en alert med en viss tekst.

Anta at vi har en funksjon showMess som viser en alert med en melding, og i HTML-koden er det en knapp som vi ønsker at skal vise denne alerten når vi klikker på den:

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

La oss knytte en onclick-hendelse til knappen vår slik at funksjonen showMess utføres når du klikker på denne div-en. For å gjøre dette må du legge til attributtet onClick (nettopp i camelCase, altså onClick, ikke onclick) og i det spesifisere funksjonen som skal utføres ved denne hendelsen:

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

Slik fungerer arbeid med hendelser: et attributt legges til (for eksempel onClick eller onFocus), og verdien til attributtet angir metoden som vil bli kalt ved denne hendelsen.

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