Handler Functies

We gaan nu eens kijken hoe we onze applicatie iets interactiever kunnen maken door de hand van invoer velden en handler functies. We gaan nu een nieuw component introduceren genaamd InputView Deze gaat de volgende invoer velden bevatten:

const InputView = () => {
  return (
    <div>
      <input type="text" id="name">
      <input type="number" id="year" name="year" min="1900" max="2021"/>
      <input type="button" id="submit" value="Add"/>
    </div>
  )
}

Hier hebben we 1 text invoer veld voor de naam van de film en een numeriek invoerveld voor het jaartal. We zetten hier een maximum 2021 en een minimum van 1900. Tot nu toe wordt er nog niets gedaan met deze invoervelden.

Om hier iets mee te doen gaan we een functie aanmaken om iets te doen als er iets ingetypt wordt in het invoerveld.

const handleChange = (event) => {
  console.log(event.target.value);
}

Je compiler zal hier direct een waarschuwing over geven dat event nog geen type heeft. TypeScript kan hier niet automatisch afleiden welk type dit event heeft. We zullen dit zo snel mogelijk oplossen.

Als we nu deze event listener functie willen gebruiken moeten we deze toevoegen als property van de input tag.

<input type="text" id="name" onChange={handleChange}/>
<input type="number" id="year" name="year" min="1990" max="2021" onChange={handleChange}/>

We kunnen de interface van de handleChange functie hierboven te weten komen door onze muis over de onChange property te plaatsen. Je krijgt dan iets gelijkaardig aan:

We kunnen nu het type van de handleChange functie aanpassen om de waarschuwing van hierboven op te lossen.

const handleChange : ChangeEventHandler<HTMLInputElement> = (event) => {
  console.log(event.target.value);
}

We kunnen op dezelfde manier een functie maken om een button click af te handelen:

const handleClick : MouseEventHandler<HTMLInputElement> = (event) => {
  console.log("button clicked");
}

Het type van de handleClick komen we op dezelfde manier te weten.