#03formularzei_walidacja

Opis Formularze w React najczęściej robi się przez useState. Dane z inputa zapisujemy do stanu, a potem obsługujemy formularz w onSubmit.

REACTcopyimport { useState } from "react";

function App() {
  const [imie, setImie] = useState("");

  function wyslij(e) {
    e.preventDefault();
    alert("Cześć " + imie);
  }

  return (
    <div>
      <h1>Prosty formularz</h1>

      <form onSubmit={wyslij}>
        <input
          type="text"
          placeholder="Podaj imię"
          value={imie}
          onChange={(e) => setImie(e.target.value)}
        />

        <button type="submit">Wyślij</button>
      </form>
    </div>
  );
}

export default App;

#Formularz z kilkoma polami

REACTcopyimport { useState } from "react";

function App() {
  const [formularz, setFormularz] = useState({
    imie: "",
    email: "",
    wiek: ""
  });

  function zmienDane(e) {
    const { name, value } = e.target;

    setFormularz({
      ...formularz,
      [name]: value
    });
  }

  function wyslij(e) {
    e.preventDefault();
    console.log(formularz);
  }

  return (
    <div>
      <h1>Formularz użytkownika</h1>

      <form onSubmit={wyslij}>
        <input
          name="imie"
          placeholder="Imię"
          value={formularz.imie}
          onChange={zmienDane}
        />

        <input
          name="email"
          placeholder="Email"
          value={formularz.email}
          onChange={zmienDane}
        />

        <input
          name="wiek"
          type="number"
          placeholder="Wiek"
          value={formularz.wiek}
          onChange={zmienDane}
        />

        <button type="submit">Zapisz</button>
      </form>

      <p>Imię: {formularz.imie}</p>
      <p>Email: {formularz.email}</p>
      <p>Wiek: {formularz.wiek}</p>
    </div>
  );
}

export default App;

#Walidacja formularza

REACTcopyimport { useState } from "react";

function App() {
  const [imie, setImie] = useState("");
  const [email, setEmail] = useState("");
  const [blad, setBlad] = useState("");

  function wyslij(e) {
    e.preventDefault();

    if (imie.length < 3) {
      setBlad("Imię musi mieć minimum 3 znaki");
      return;
    }

    if (!email.includes("@")) {
      setBlad("Email musi zawierać znak @");
      return;
    }

    setBlad("");
    alert("Formularz poprawny");
  }

  return (
    <div>
      <h1>Walidacja danych</h1>

      <form onSubmit={wyslij}>
        <input
          type="text"
          placeholder="Imię"
          value={imie}
          onChange={(e) => setImie(e.target.value)}
        />

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

        <button type="submit">Wyślij</button>
      </form>

      {blad && <p style={{ color: "red" }}>{blad}</p>}
    </div>
  );
}

export default App;