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 handleSubmit = (e) => {
    e.preventDefault();

    

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

    
    
  };

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

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

      <input
        type="text"
        placeholder="Item..."
        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 }) => {
  ({
    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 { 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
        "
        value={item.quantity}
        
      >
        {Array.from({ length: 20 }, (_, i) => i + 1).map((num) => (
          <option value={num} key={num}>
            {num}
          </option>
        ))}
      </select>

      <input
        type="text"
        placeholder="Item..."
        
        value={item.description}
        
      />

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

export default Form;

Validierung

TODO

Uncontrolled Forms

TODO

useForm-Hook

TODO