React - formulieren

React

useRef

Probleem

  • Download todo-list-exercise_solution.zip
    • npm install
    • npm run dev
    • Wat is er niet optimaal?
      • Tip: React rendert een component opnieuw wanneer state verandert. We willen onnodige renders zoveel mogelijk vermijden!

useRef

  • ☝️ Wat is er niet optimaal?
    • Bij elke aanpassing (change) in het tekstveld, wordt de component opnieuw gerenderd.
      Maar: als we niet op Submit klikken, wijzigt er niets.
    • Oplossing? → useRef

useRef

useRef is a React Hook that lets you reference a value that’s not needed for rendering.

  • Input-element opslaan in een variabele, want het moet/mag niet opnieuw gerenderd worden
  • Andere voorbeelden? Documentatie

useRef

export default function App() {
  const taskDescriptionInputRef = useRef<HTMLInputElement>(null);
  // ...

  function handleSubmit() {
    if (taskDescriptionInputRef.current && taskDescriptionInputRef.current.value) {
      setTasks([...tasks, { id: crypto.randomUUID(), description: taskDescriptionInputRef.current.value, isCompleted: false }]);
      taskDescriptionInputRef.current.value = "";
    }
  }
  
  // ...
  
  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input type="text" placeholder="Add your task" ref={taskDescriptionInputRef} />
        <div>
          <button onClick={handleSubmit}>Submit</button>
        </div>
      </div>     
      {showTasks()}
    </div>
  );
}

React

Formulieren valideren

Formulieren valideren

= nagaan of de data die een gebruiker ingeeft,
overeenkomt met alle verwachtingen en beperkingen

  • Server-side validation
  • Client-side validation 👈

Validaties

  • Welke formuliervalidaties kunnen we bedenken?
    Denk aan onderstaande velden:
    • Postcode
    • Paswoord
    • Telefoonnummer
    • Ondernemingsnummer
    • ...

Validaties

  • ☝️ Welke formuliervalidaties kunnen we bedenken?
    • Lengte
    • Formaat / patroon (reguliere expressie)
    • Vereist / optioneel
    • Bereik (tussen x en y)
    • Cross-field (bv. overeenkomende paswoorden)
    • ...

useRef

  • Voorbeeld: maximale lengte valideren
    → HTML: maxlength-attribuut
    • ⚠️ geen custom foutboodschap mogelijk
    • ⚠️ te lange tekst wordt afgekapt
    • Oplossing in React?
      → state: taskDescriptionLengthError

React Hook Form

⚠️ Opgepast: React → JS(X)-notatie

  • minlength → minLength
  • maxlength → maxLength
  • ...

Formulieren valideren

  • Code wordt snel onoverzichtelijk (state, refs ...)
    bij complexe validaties
  • Oplossing? → TanStack Form !
    • ✅ Minder code voor hetzelfde resultaat
    • ✅ Onnodige re-rendering vermijden
    • ✅ Declaratieve syntax
    • 👎 Bijkomende dependency
    • 👎 Veel boilerplate voor kleine formulieren

React

TanStack Form

TanStack Form

Headless UI for building performant and type-safe forms


Waarom TanStack Form? 🤔

  • TanStack ecosysteem: Query, Router ...
  • TypeScript support 
  • Gelijkaardige syntax als React Hook Form

TanStack Form

Oefening

Oefening:

npm i @tanstack/react-form
  • Maak routes/index.tsx aan

Oefening

Oefening

Stap 1: maak het formulier in gewone HTML (JSX)

Oefening

Stap 2: useForm hook + beschrijf initiële waardes

Oefening

Stap 3: voorkom het standaardgedrag van <form>

 

🤔 Wat is het standaardgedrag van <form> ?

Oefening

Stap 3: voorkom het standaardgedrag van <form>

 

🤔 Wat is het standaardgedrag van <form> ?

  • Bij verzenden: verstuurt een request naar de server
  • Server antwoordt en de pagina laadt opnieuw
  • ☝️ Wij willen dit gedrag voorkomen en het
    verzenden asynchroon afhandelen (JavaScript)

Oefening

Stap 3: voorkom het standaardgedrag van <form>

Oefening

Stap 4: gebruik form.Field om de velden uit de
form-variabele toe te wijzen

  • name-attribuut
    • De naam die we gebruikten voor
      defaultValue in form
  • children-attribuut
    • functie die JSX returnt om het veld te renderen

Oefening

Oefening

Stap 5: onSubmit functie toevoegen

Oefening

Stap 6: voor elk veld onChange en value implementeren, zodat TanStack Form altijd de laatste waardes heeft

Oefening

Stap 7: validatie per veld toevoegen

  • Wanneer valideren? Twee opties:
  • Foutboodschap tonen
    • Error? Return een string met de foutboodschap
    • Geen error? Return undefined
Made with Slides.com