computer-mouseEvent Handling

Mit React können wir unserem JSX Event-Handler hinzufügen. Event-Handler sind unsere eigenen Funktionen, die als Antwort auf Interaktionen wie Klicken, Hovering, Fokussieren von Formulareingaben usw. ausgelöst werden.

Event-Handler hinzufĂĽgen

Um einen Event-Handler hinzuzufügen, definieren wir zunächst eine Funktion und übergeben diese dann als Prop an das entsprechende JSX-Tag.

const Button = () => {
  const handleClick = () => alert('You clicked me!');

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

export default Button;

Es ist natürlich auch möglich einen Event-Handler inline zu definieren.

<button onClick={() => alert('You clicked me!')}>
circle-info

Es gibt noch viele weitere Events:

  • onMouseEnter

  • onChange

  • onCopy

  • ...

Event-Handlers als Props

Oft möchte man, dass die übergeordnete Komponente den Event-Handler einer untergeordneten Komponente festlegt. Zum Beispiel Buttons: Je nachdem, wo man eine Button-Komponente verwendet, möchte man vielleicht eine andere Funktion ausführen - vielleicht spielt eine einen Film ab und eine andere lädt ein Bild hoch.

Wir übergeben dazu ein Prop, die die Komponente von der übergeordneten Komponente erhält, als Event-Handler, etwa so:

Hier stellt die Toolbar-Komponente einen PlayButton und einen UploadButton dar:

  • PlayButton ĂĽbergibt handlePlayClick als onClick-Prop an den Button darin.

  • UploadButton ĂĽbergibt () => alert('Uploading!') als onClick-Prop an den Button im Inneren.

Schliesslich akzeptiert dieButton-Komponente eine Eigenschaft namens onClick. Sie ĂĽbergibt dieses Prop direkt an den eingebauten Browser <button> mit onClick={onClick}. Dadurch wird React angewiesen, die ĂĽbergebene Funktion bei einem Klick aufzurufen.

Wenn man ein Designsystemarrow-up-right verwendet, ist es üblich, dass Komponenten wie Schaltflächen zwar Styling enthalten, aber kein Verhalten festlegen. Stattdessen werden Komponenten wie PlayButton und UploadButton Event-Handler weitergeben.

Last updated