> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Event 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.

```tsx theme={null}
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.

```tsx theme={null}
<button onClick={() => alert('You clicked me!')}>
```

<Info>
  Es gibt noch viele weitere Events:

  * `onMouseEnter`
  * `onChange`
  * `onCopy`
  * ...
</Info>

## 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.<br />

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

<Tabs>
  <Tab title="Button">
    ```tsx title="Button.jsx" theme={null}
    const Button = ({ onClick, children }) => {
      return (
        <button onClick={onClick}>
          {children}
        </button>
      );
    }

    export default Button;
    ```
  </Tab>

  <Tab title="Upload Button">
    ```tsx title="UploadButton.jsx" theme={null}
    const UploadButton = () => {
      return (
        <Button onClick={() => alert('Uploading')}>
          Play "{movieName}"
        </Button>
      );
    }

    export default UploadButton;
    ```
  </Tab>

  <Tab title="Play Button">
    ```tsx title="PlayButton.jsx" theme={null}
    const PlayButton = ({ movieName }) => {
      const handlePlayClick = () => alert(`Playing ${moviename}!`);

      return (
        <Button onClick={handlePlayClick}>
          Play "{movieName}"
        </Button>
      );
    }

    export default PlayButton;
    ```
  </Tab>

  <Tab title="Toolbar">
    ```tsx title="Toolbar.jsx" theme={null}
    const Toolbar = () => {
      return (
        <div>
          <PlayButton movieName="Kiki's Delivery Service" />
          <UploadButton />
        </div>
      );
    }

    export default Toolbar;
    ```
  </Tab>
</Tabs>

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 die`Button`-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 [Designsystem](https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969) 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.