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.

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

  return (
    <button >
      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!')}>

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:

Button

Button.jsx

const Button = ({ onClick, children }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

Upload Button

UploadButton.jsx

const UploadButton = () => {
  return (
    <Button onClick={() => alert('Uploading')}>
      Play "{movieName}"
    </Button>
  );
}

export default UploadButton;

Play Button

PlayButton.jsx

const PlayButton = ({ movieName }) => {
  const handlePlayClick = () => alert(`Playing ${moviename}!`);

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

export default PlayButton;

Toolbar

Toolbar.jsx

const Toolbar = () => {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
      <UploadButton />
    </div>
  );
}

export default Toolbar;

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 Designsystem 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.