Håndtering af events i JSX

Lad os nu studere arbejdet med events i React. For eksempel, lad os lave det sådan, at ved et klik på en blok vises en alert med en vis tekst.

Antag at vi har en funktion showMess, som viser en alert med en besked, og i HTML-koden er der en knap, ved klik på hvilken vi gerne vil se denne alert:

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

Lad os knytte eventet onclick til vores knap sådan, at ved klik på denne div udløses funktionen showMess. For at gøre dette skal du tilføje attributten onClick (netop i camelCase, det vil sige onClick, og ikke onclick), og i den angive den funktion, der skal udføres ved dette event:

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

Sådan foregår arbejdet med events: der tilføjes en attribut (for eksempel onClick eller onFocus), attributtens værdi angiver den metode, der vil blive kaldt ved dette event.

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