Event-Handling in JSX

Lassen Sie uns nun die Arbeit mit Ereignissen in React studieren. Lassen Sie uns zum Beispiel bewirken, dass beim Klick auf einen Block ein alert mit einem bestimmten Text erscheint.

Angenommen, wir haben eine Funktion showMess, die einen alert mit einer Nachricht anzeigt, und im HTML- Code gibt es einen Button, bei dem wir bei einem Klick diesen alert sehen möchten:

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

Binden wir nun unserem Button das Ereignis onclick, so dass beim Klick auf diesen Button die Funktion showMess ausgelöst wird. Dazu muss das Attribut onClick hinzugefügt werden (und zwar in camelCase, also onClick, nicht onclick), und darin die Funktion angegeben werden, die bei diesem Ereignis ausgeführt werden soll:

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

So funktioniert also die Arbeit mit Ereignissen: Es wird ein Attribut hinzugefügt (zum Beispiel onClick oder onFocus), und als Wert des Attributs wird die Methode angegeben, die bei diesem Ereignis aufgerufen wird.

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