Events

Wat zijn Events?

Net als in HTML kan React reageren op gebruikersacties zoals:

• Klikken op een button
• Typen in een input veld
• Hoveren over een element
• Een formulier versturen

React Event Syntax

React events schrijf je met camelCase in plaats van kleine letters:

• onClick in plaats van onclick
• onChange in plaats van onchange
• onMouseOver in plaats van onmouseover
• onSubmit in plaats van onsubmit

En de event handlers schrijf je binnen curly braces {}:

<button onclick="handleClick()">Click</button>

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

onClick Events

Basis Voorbeeld

const Button = () => {
  const handleClick = () => {
    alert('Button werd geklikt!');
  };

  return (
    <button onClick={handleClick}>
      Klik mij!
    </button>
  );
};

export default Button;

Inline Event Handler

Voor simpele acties kun je de functie ook direct inline schrijven:

const Button = () => {
  return (
    <button onClick={() => alert('Geklikt!')}>
      Klik mij!
    </button>
  );
};

Met State

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
};

onChange Events

De onChange event wordt gebruikt voor input velden. Elke keer dat de gebruiker iets typt, wordt deze event getriggered.

Input Veld met State

import { useState } from 'react';

const NameInput = () => {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <input 
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="Typ je naam"
      />
      <p>Hallo, {name}!</p>
    </div>
  );
};

Inline onChange

const NameInput = () => {
  const [name, setName] = useState('');

  return (
    <input 
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
};

Praktische Voorbeelden

Toggle Button

const Toggle = () => {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'Aan' : 'Uit'}
    </button>
  );
};

Form Submit

const Form = () => {
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();  // Stop page refresh
    alert(`Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Verstuur</button>
    </form>
  );
};

Mouse Events

const Hover = () => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{ 
        backgroundColor: isHovered ? 'lightblue' : 'white',
        padding: '20px'
      }}
    >
      {isHovered ? 'Je hovert!' : 'Hover over mij'}
    </div>
  );
};

Belangrijke Regels

• camelCase: onClick, niet onclick
• Functie referentie: onClick={handleClick}, niet onClick={handleClick()}
• Event object: Gebruik (e) om toegang te krijgen tot event data
• preventDefault(): Gebruik dit bij forms om page refresh te stoppen

Veelgemaakte Fouten

<button onClick={handleClick()}>  // Uitvoeren bij render!
  Click
</button>

<button onClick={handleClick}>  // Uitvoeren bij click
  Click
</button>

<button onclick={handleClick}>  // Werkt niet!

<button onClick={handleClick}>  // Werkt!

const handleSubmit = (e) => {
  // Pagina refresht!
  alert('Submit');
};

const handleSubmit = (e) => {
  e.preventDefault();  // Stop refresh
  alert('Submit');
};