📝 Form Events

Form events handle user input and submissions. React makes form handling controlled and predictable.

onSubmit Event

function LoginForm() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitting:", email, password);
  };

  return (
    <form onSubmit={{handleSubmit}}>
      <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="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

onChange Event

The onChange event fires whenever an input value changes:

function FormField() {
  const [text, setText] = React.useState("");

  return (
    <div>
      <input
        value={{text}}
        onChange={{(e) => setText(e.target.value)}}
        placeholder="Type here..."
      />
      <p>You typed: {{text}}</p>
    </div>
  );
}

Different Input Types

<input type="text" onChange={{handleChange}} />
<textarea onChange={{handleChange}} />
<input type="checkbox" onChange={{handleChange}} />
<select onChange={{handleChange}}>
  <option value="option1">Option 1</option>
</select>

Form Validation Example

function ValidatedInput() {
  const [email, setEmail] = React.useState("");
  const [error, setError] = React.useState("");

  const handleChange = (e) => {
    const value = e.target.value;
    setEmail(value);
    
    if (!value.includes("@")) {
      setError("Please enter a valid email");
    } else {
      setError("");
    }
  };

  return (
    <div>
      <input value={{email}} onChange={{handleChange}} placeholder="Email" />
      {{error && <p style={{{ color: "red" }}}>{{error}}</p>}}
    </div>
  );
}

✅ Key Takeaways

• Use `onSubmit` on forms with **preventDefault()** to stop page reload

• Use `onChange` to **update state** with each keystroke

• Different input types (text, checkbox, select) work with `onChange`

• Implement **validation** by checking input values