Event Handling

Text Input

We gaan nu eens kijken hoe we onze applicatie iets interactiever kunnen maken door de hand van form elementen en event handling. We gaan nu een nieuwe component introduceren genaamd InputView. Deze staat toe een naam en een jaartal in te vullen.

const InputView = () => {
  return (
    <div>
      <div style={styles.inputFields}>
        <label htmlFor="name">name:</label>
        <input type="text" id="name" />
        <label htmlFor="year">year:</label>
        <input type="number" id="year" name="year" min="1900" max="2021" />
      </div>
      <input type="button" id="submit" value="Add Movie" />
    </div>
  )
}

Hier hebben we één tekstveld 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, maken we een functie om iets te doen wanneer er iets ingetypt wordt in het invoerveld. Dit soort functie is een event listener. Verderop in de code zullen we er voor zorgen dat deze functie loopt zodra een bepaald type gebeurtenis (event) zich voordoet.

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

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

We kunnen nu de signatuur handleChange aanpassen om de waarschuwing van hierboven op te lossen.

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

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

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

Het is ook mogelijk om de event handlers op te geven een anonieme handler functie:

const InputView = () => {
  return (
    <div>
      <div style={styles.inputFields}>
        <label htmlFor="name">name:</label>
        <input type="text" id="name" onChange={(event) => { console.log(event.target.value); }}/>
        <label htmlFor="year">year:</label>
        <input type="number" id="year" name="year" min="1900" max="2021" onChange={(event) => { console.log(event.target.value); }}/>
      </div>
      <input type="button" id="submit" value="Add Movie" onClick={(event) => { console.log("button clicked");}}/>
    </div>
  )
}

Hier ben je niet verplicht een type mee te geven omdat hij zelf het type kan afleiden.

notitie

In HTML is er een verschil tussen een input en een change event. Bij React is dit niet het geval. Beide triggeren bij elke wijziging aan het input veld.

Checkbox

Checkbox werkt zeer gelijkaardig aan de andere input elementen. We gebruiken hier ook een onChange handler.

const App = () => {
    return (
      <>
        <label>
        <input
          type="checkbox"
          onChange={(event) => console.log(event.target.checked)}
        />
        Toggle
      </label>
      </>
    )
}

export default App;

Het type van deze handler is ook React.ChangeEventHandler<HTMLInputElement>

Select

const App = () => {
    return (
      <>
        <label htmlFor="cars">Choose a car:</label>
        <select id="cars" name="cars" onChange={(event) => console.log(event.target.value)}>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="fiat">Fiat</option>
          <option value="audi">Audi</option>
        </select>
      </>
    )
}

export default App;

Deze handler heeft het type React.ChangeEventHandler<HTMLSelectElement>