Event Handling

Events machen deine React-App interaktiv. Ob ein Button-Klick, eine Tasteneingabe oder ein Formular-Submit – du musst wissen, wie du auf Benutzeraktionen reagierst.

Grundlagen: onClick

Das einfachste Event ist der Klick:

function App() {
  function handleClick() {
    alert('Button wurde geklickt!');
  }

  return <button onClick={handleClick}>Klick mich</button>;
}

Wichtige Unterschiede zu HTML

// HTML - String mit Funktionsaufruf
<button onclick="handleClick()">Klick</button>

// React - Funktion als Referenz (OHNE Klammern!)
<button onClick={handleClick}>Klick</button>

HTML	React
onclick	onClick
onchange	onChange
onsubmit	onSubmit
String: "handler()"	Referenz: {handler}

Event-Handler definieren

Als benannte Funktion

function App() {
  function handleClick() {
    console.log('Geklickt!');
  }

  return <button onClick={handleClick}>Klick</button>;
}

Als Inline-Arrow-Function

function App() {
  return (
    <button onClick={() => console.log('Geklickt!')}>
      Klick
    </button>
  );
}

Mit Parametern

function App() {
  function handleGreet(name) {
    alert(`Hallo, ${name}!`);
  }

  return (
    <div>
      {/* Arrow Function, um Parameter zu uebergeben */}
      <button onClick={() => handleGreet('Max')}>Gruesse Max</button>
      <button onClick={() => handleGreet('Anna')}>Gruesse Anna</button>
    </div>
  );
}

Das Event-Objekt

Jeder Event-Handler bekommt automatisch ein Event-Objekt:

function App() {
  function handleClick(event) {
    console.log('Event-Typ:', event.type);           // "click"
    console.log('Ziel-Element:', event.target);       // <button>
    console.log('Maus-Position:', event.clientX, event.clientY);
  }

  return <button onClick={handleClick}>Klick mich</button>;
}

Event mit Parametern kombinieren

function App() {
  function handleClick(id, event) {
    console.log('Item ID:', id);
    console.log('Event:', event.type);
  }

  return (
    <button onClick={(e) => handleClick(42, e)}>
      Item 42
    </button>
  );
}

Wichtige Event-Typen

Maus-Events

function MouseEvents() {
  return (
    <div>
      <button onClick={() => console.log('Klick!')}>
        onClick
      </button>
      <button onDoubleClick={() => console.log('Doppelklick!')}>
        onDoubleClick
      </button>
      <div
        onMouseEnter={() => console.log('Maus rein')}
        onMouseLeave={() => console.log('Maus raus')}
        style={{ padding: '1rem', background: '#eee' }}
      >
        Hover ueber mich
      </div>
    </div>
  );
}

Tastatur-Events

function KeyboardEvents() {
  function handleKeyDown(event) {
    if (event.key === 'Enter') {
      console.log('Enter gedrueckt!');
    }
    if (event.key === 'Escape') {
      console.log('Escape gedrueckt!');
    }
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      console.log('Strg+S gedrueckt!');
    }
  }

  return (
    <input
      onKeyDown={handleKeyDown}
      placeholder="Druecke Enter oder Escape..."
    />
  );
}

Formular-Events

function FormEvents() {
  const [value, setValue] = useState('');

  function handleSubmit(event) {
    event.preventDefault(); // Seiten-Reload verhindern!
    console.log('Formular abgeschickt:', value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onFocus={() => console.log('Fokus erhalten')}
        onBlur={() => console.log('Fokus verloren')}
      />
      <button type="submit">Absenden</button>
    </form>
  );
}

Focus-Events

function FocusExample() {
  const [focused, setFocused] = useState(false);

  return (
    <input
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={{
        outline: 'none',
        border: focused ? '2px solid #3498db' : '2px solid #ccc',
        padding: '8px',
        borderRadius: '4px'
      }}
      placeholder="Klick hier rein..."
    />
  );
}

Event-Propagation (Bubbling)

Events steigen im DOM-Baum nach oben (Bubbling):

function Bubbling() {
  return (
    <div onClick={() => console.log('Div geklickt!')}>
      <button onClick={() => console.log('Button geklickt!')}>
        Klick mich
      </button>
    </div>
  );
}
// Klick auf Button: "Button geklickt!" + "Div geklickt!"

Propagation stoppen

function StopPropagation() {
  return (
    <div onClick={() => console.log('Div geklickt!')}>
      <button onClick={(e) => {
        e.stopPropagation(); // Stoppt das Bubbling!
        console.log('Nur Button geklickt!');
      }}>
        Klick mich
      </button>
    </div>
  );
}
// Klick auf Button: nur "Nur Button geklickt!"

Praktisches Beispiel: Interaktive Karte

function InteractiveCard() {
  const [isExpanded, setIsExpanded] = useState(false);
  const [likes, setLikes] = useState(0);

  return (
    <div style={{
      border: '1px solid #ddd',
      borderRadius: '12px',
      padding: '1.5rem',
      maxWidth: '400px'
    }}>
      <h2>React lernen</h2>
      <p>
        {isExpanded
          ? 'React ist eine JavaScript-Bibliothek fuer die Erstellung von Benutzeroberflaechen. Sie wurde von Meta entwickelt und ist die beliebteste Frontend-Bibliothek weltweit.'
          : 'React ist eine JavaScript-Bibliothek fuer die Erstellung von...'}
      </p>
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        style={{ background: 'none', border: 'none', color: '#3498db', cursor: 'pointer' }}
      >
        {isExpanded ? 'Weniger anzeigen' : 'Mehr lesen'}
      </button>
      <div style={{ marginTop: '1rem', display: 'flex', gap: '1rem' }}>
        <button
          onClick={() => setLikes(prev => prev + 1)}
          style={{
            padding: '4px 12px',
            border: '1px solid #e74c3c',
            borderRadius: '20px',
            background: 'none',
            cursor: 'pointer',
            color: '#e74c3c'
          }}
        >
          {likes} Likes
        </button>
        <button
          onClick={() => navigator.clipboard.writeText('React ist toll!')}
          style={{
            padding: '4px 12px',
            border: '1px solid #3498db',
            borderRadius: '20px',
            background: 'none',
            cursor: 'pointer'
          }}
        >
          Teilen
        </button>
      </div>
    </div>
  );
}

Haeufige Fehler

Fehler 1: Funktion sofort aufrufen

// FALSCH - Funktion wird sofort aufgerufen!
<button onClick={handleClick()}>Klick</button>

// RICHTIG - Funktion als Referenz uebergeben
<button onClick={handleClick}>Klick</button>

// RICHTIG - Wenn Parameter noetig
<button onClick={() => handleClick(42)}>Klick</button>

Fehler 2: preventDefault vergessen

// FALSCH - Seite wird neu geladen
<form onSubmit={handleSubmit}>

function handleSubmit() {
  console.log('Abgeschickt');
  // Seite wird neu geladen!
}

// RICHTIG
function handleSubmit(event) {
  event.preventDefault();
  console.log('Abgeschickt');
}

Uebungen

1. Baue ein Like-System mit einem Herz-Button, der die Anzahl der Likes zaehlt
2. Erstelle eine Tastatur-Anzeige, die anzeigt, welche Taste gerade gedrueckt wird
3. Baue eine Akkordeon-Komponente, bei der Klicks verschiedene Bereiche auf- und zuklappen

Was kommt als Naechstes?

Du weisst jetzt, wie Events in React funktionieren. Im naechsten Kapitel lernst du Formulare in React – das Zusammenspiel von State, Events und Eingabefeldern fuer komplexere Benutzerinteraktionen.

Zusammenfassung

• Events in React werden in camelCase geschrieben: onClick, onChange, onSubmit
• Uebergib Funktionen als Referenz, nicht als Aufruf: onClick={handler} statt onClick={handler()}
• Das Event-Objekt wird automatisch uebergeben und enthaelt nuetzliche Informationen
• Nutze event.preventDefault() bei Formularen und event.stopPropagation() bei Bubbling
• Fuer Parameter nutze Arrow Functions: onClick={() => handler(param)}

---