React Event Handling

React Events funktionieren ähnlich wie DOM Events, aber mit CamelCase Syntax!

Event Basics

function Button() {
  const handleClick = () => {
    alert('Geklickt!')
  }

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

// Inline (für einfache Funktionen)
<button onClick={() => alert('Hi!')}>Click</button>

Häufige Events

function Events() {
  return (
    <div>
      {/* Click */}
      <button onClick={(e) => console.log('Click', e)}>
        Click
      </button>

      {/* Input Change */}
      <input 
        onChange={(e) => console.log(e.target.value)}
        placeholder="Type..."
      />

      {/* Form Submit */}
      <form onSubmit={(e) => {
        e.preventDefault()
        console.log('Submit')
      }}>
        <button type="submit">Send</button>
      </form>

      {/* Mouse Events */}
      <div
        onMouseEnter={() => console.log('Enter')}
        onMouseLeave={() => console.log('Leave')}
      >
        Hover me
      </div>

      {/* Keyboard */}
      <input
        onKeyDown={(e) => console.log('Key:', e.key)}
        onKeyPress={(e) => console.log('Press:', e.key)}
      />
    </div>
  )
}

Event Object

function HandleEvent() {
  const handleClick = (event) => {
    console.log('Type:', event.type)
    console.log('Target:', event.target)
    console.log('CurrentTarget:', event.currentTarget)
    
    // Prevent Default
    event.preventDefault()
    
    // Stop Propagation
    event.stopPropagation()
  }

  return <button onClick={handleClick}>Click</button>
}

Controlled Components

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

  return (
    <div>
      <input 
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <p>Du hast getippt: {value}</p>
    </div>
  )
}