Forms

Basis Form

In React bouw je forms met controlled components. Dit betekent dat React de waarde van input velden controleert via state.

import { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Naam: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Typ je naam"
      />
      <button type="submit">Verstuur</button>
    </form>
  );
};

export default BasicForm;

Verschillende Input Types

Text Input

const [text, setText] = useState('');

<input 
  type="text"
  value={text}
  onChange={(e) => setText(e.target.value)}
/>

Email Input

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

<input 
  type="email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

Checkbox

const [agreed, setAgreed] = useState(false);

<input 
  type="checkbox"
  checked={agreed}
  onChange={(e) => setAgreed(e.target.checked)}
/>

Select Dropdown

const [country, setCountry] = useState('');

<select value={country} onChange={(e) => setCountry(e.target.value)}>
  <option value="">Kies een land</option>
  <option value="nl">Nederland</option>
  <option value="be">België</option>
  <option value="de">Duitsland</option>
</select>

Textarea

const [message, setMessage] = useState('');

<textarea 
  value={message}
  onChange={(e) => setMessage(e.target.value)}
  rows="5"
/>

Form met Object State

Voor forms met meerdere velden is het handig om een object te gebruiken:

import { useState } from 'react';

const UserForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    age: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="Naam"
      />
      
      <input 
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="Email"
      />
      
      <input 
        type="number"
        name="age"
        value={formData.age}
        onChange={handleChange}
        placeholder="Leeftijd"
      />
      
      <button type="submit">Verstuur</button>
    </form>
  );
};

Form Validatie

Controleer of de input correct is voordat je het verstuurt:

import { useState } from 'react';

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    setError(''); // Reset error

    // Validatie
    if (!email) {
      setError('Email is verplicht');
      return;
    }
    
    if (!password || password.length < 6) {
      setError('Wachtwoord moet minimaal 6 karakters zijn');
      return;
    }

    // Submit form
    console.log('Form is valid!', email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      
      <input 
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      
      <input 
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Wachtwoord"
      />
      
      <button type="submit">Login</button>
    </form>
  );
};

Praktische Voorbeelden

Contact Form

const ContactForm = () => {
  const [form, setForm] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // Send to API
    console.log('Sending:', form);
    // Reset form
    setForm({ name: '', email: '', message: '' });
  };

  const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        name="name"
        value={form.name}
        onChange={handleChange}
        placeholder="Naam"
        required
      />
      
      <input 
        name="email"
        type="email"
        value={form.email}
        onChange={handleChange}
        placeholder="Email"
        required
      />
      
      <textarea 
        name="message"
        value={form.message}
        onChange={handleChange}
        placeholder="Bericht"
        required
      />
      
      <button type="submit">Verstuur</button>
    </form>
  );
};

Registration Form met Checkbox

const RegisterForm = () => {
  const [form, setForm] = useState({
    email: '',
    password: '',
    agree: false
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.agree) {
      alert('Je moet akkoord gaan met de voorwaarden');
      return;
    }
    console.log('Registering:', form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email"
        value={form.email}
        onChange={(e) => setForm({...form, email: e.target.value})}
      />
      
      <input 
        type="password"
        value={form.password}
        onChange={(e) => setForm({...form, password: e.target.value})}
      />
      
      <label>
        <input 
          type="checkbox"
          checked={form.agree}
          onChange={(e) => setForm({...form, agree: e.target.checked})}
        />
        Ik ga akkoord met de voorwaarden
      </label>
      
      <button type="submit">Registreer</button>
    </form>
  );
};