Formulare

In React gibt es mehrere Möglichkeiten Formulare zu erstellen, Controlled, Uncontrolled, useForm-Hook, etc.

Controlled Forms

Mit Controlled Forms speichern wir jedes Input-Field in einer State-Variable und setzen der Wert jedes Inputs nach jedem Re-Render der Komponente. Das gibt uns mehr Möglichkeiten, um Validierungen oder Manipulationen vorzunehmen (bspw. um Telefonnummern korrekt zu formatieren).

const Form = ({ onAddItem }) => {
  const [description, setDescription] = useState('');
  const [quantity, setQuantity] = useState(1);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!description.trim()) return;

    onAddItem({ description, quantity, packed: false, id: Date.now() });

    setDescription('');
    setQuantity(1);
  };

  return (
    <form className="add-form" onSubmit={handleSubmit}>
      <h3>What do you need for your 😍 trip?</h3>

      <select
        value={quantity}
        onChange={(e) => setQuantity(Number(e.target.value))}
      >
        {Array.from({ length: 20 }, (_, i) => i + 1).map((num) => (
          <option value={num} key={num}>
            {num}
          </option>
        ))}
      </select>

      <input
        type="text"
        placeholder="Item..."
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />

      <button type="submit">Add</button>
    </form>
  );
};

export default Form;

Objekte

Anstatt für jedes Input-Field eine eigene State-Variable zu erstellen, können wir ein einzelnes Objekt nutzen.

const Form = ({ onAddItem }) => {
  const [item, setItem] = useState({
    description: '',
    quantity: 1,
    packed: false,
    id: Date.now(),
  });

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!item.description.trim()) return;

    onAddItem(item);

    setItem({ description: '', quantity: 1, packed: false, id: Date.now() });
  };

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

  return (
    <form className="add-form" onSubmit={handleSubmit}>
      <h3>What do you need for your 😍 trip?</h3>

      <select
        name="quantity"
        value={item.quantity}
        onChange={(e) => handleChange(e)}
      >
        {Array.from({ length: 20 }, (_, i) => i + 1).map((num) => (
          <option value={num} key={num}>
            {num}
          </option>
        ))}
      </select>

      <input
        type="text"
        placeholder="Item..."
        name="description"
        value={item.description}
        onChange={(e) => handleChange(e)}
      />

      <button type="submit">Add</button>
    </form>
  );
};

export default Form;

Validierung

TODO

Uncontrolled Forms

TODO

useForm-Hook

TODO