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>
  );
}

useRef

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

React Hook Form

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

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

Formulieren valideren

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

Formulieren valideren

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

Formulieren valideren

  • Code wordt snel onoverzichtelijk (state, refs ...)
    bij complexe validaties
  • Oplossing? → React Hook Form ✅
     

React Hook Form reduces the amount of code you need to write while removing unnecessary re-renders.

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

Oefening

Oefening:

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

Oefening

Oefening

Validaties:

  • Voornaam:
    vereist, max. 50 karakters
  • Familienaam:
    vereist, max. 50 karakters
  • Leeftijd:
    tussen 0 en 99

Oefening

Stap 1: maak een interface die het formulier beschrijft

PGM3: React - Formulieren

By kareldesmet

Made with Slides.com

PGM3: React - Formulieren

  • 2

More from kareldesmet