React

Hoe werk je met formulieren in React?

Controlled vs uncontrolled components.

Home/Categorieën/React/Hoe werk je met formulieren in React?

Controlled components

State controls input value. Best practice.

Code Voorbeelden

JAVASCRIPTControlled form
function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  function handleSubmit(e) {
    e.preventDefault();
    console.log(email, password);
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" />
      <button type="submit">Login</button>
    </form>
  );
}

Relevante trefwoorden

formcontrolleduncontrolled