Events und bedingtes Rendering

Reagiere auf Nutzeraktionen und blende Elemente je nach Bedingung ein oder aus.

8 Min. · 3 Fragen

Ein Event ist eine Nutzeraktion: ein Klick, ein Tastendruck, das Absenden eines Formulars... In React hörst du auf ein Event, indem du eine Funktion an ein spezielles Prop übergibst: onClick für Klicks, onChange für Eingaben und so weiter. Achte auf die camelCase-Schreibweise: onClick mit großem C, nicht onclick wie in HTML.

function AlertButton() {
  function handleClick() {
    alert("Button clicked!");
  }

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

Das zweite Werkzeug in dieser Lektion ist das bedingte Rendering, also je nach Bedingung Verschiedenes anzuzeigen. Wie ein Ladenschild, auf dem "Offen" oder "Geschlossen" steht, kann eine Komponente wählen, was sie anzeigt. Das gängigste Werkzeug ist der ternäre Operator: condition ? valueIfTrue : valueIfFalse, eine kompakte Schreibweise für "wenn... sonst...".

function Status({ isLoggedIn }) {
  return (
    <p>
      {isLoggedIn ? "Welcome!" : "Please sign in."}
    </p>
  );
}

Und was ist, wenn du etwas oder gar nichts anzeigen willst? Dafür verwendest du den &&-Operator: In condition && element wird das Element nur angezeigt, wenn die Bedingung wahr ist. Ist sie falsch, rendert React einfach nichts, ohne Fehler.

function Cart({ itemCount }) {
  return (
    <div>
      <h3>My cart</h3>
      {itemCount > 0 && <p>{itemCount} item(s)</p>}
    </div>
  );
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welches Prop verwendest du, um in React auf einen Klick zu reagieren?
   • onclick
   • onClick
   • clickEvent
2. Warum onClick={handleClick} ohne Klammern schreiben?
   • Weil Klammern in JSX verboten sind
   • Damit die Seite schneller lädt
   • Damit die Funktion beim Klick läuft, nicht beim Rendern
3. Was zeigt {isVisible && <p>Info</p>} an, wenn isVisible false ist?
   • Gar nichts
   • Der Info-Absatz wird trotzdem angezeigt
   • React zeigt eine Fehlermeldung an