Begrip: TypeScript voor event handlers

React exporteert een aantal event die gebruikt kunnen worden om de signatuur van een event handler te definiëren. Elk van deze events is generisch wat betekent dat we er een hier aan moeten meegeven welk soort element het event getriggerd heeft. Daarnaast exporteert React ook types die gebruikt kunnen worden om een event handler in één keer te definiëren in de plaats van via de parameters, ook deze functies zijn generisch.

In de meeste gevallen is een event handler de beste keuze, soms heb je naast het event echter ook een extra parameter nodig, in dat geval gebruik je de individuele event interfaces.

In deze cursus gebruiken we bijna uitsluitend de onderstaande elementen als type parameter voor de events of event handlers die door React geëxporteerd worden.

• HTMLElement (superklasse voor alle tag)
• HTMLFormElement (<form>)
• HTMLInputElement (<input/>)
• HTMLSelectElement (<select>)
• HTMLTextAreaElement (<textarea>)

Hieronder volgt een lijst van de belangrijkste events die door React geëxporteerd worden en enkele frequent gebruikte signaturen voor event handlers. Voor meer informatie verwijzen we naar React TypeScript Cheatsheet.

import {
    ChangeEvent,        // Event voor wijzigingen in een formulier element.
    FocusEvent,         // Element krijgt of verliest focus.
    FormEvent,          // Formulier wordt ingestuurd.
    MouseEvent,         // De gebruiker klikt ergens op.
} from 'react'

const handleChangeEvent = (evt: ChangeEvent<HTMLInputElement>): void => {
    
}

const handleFocusEvent = (evt: FocusEvent<HTMLElement>): void => {
    
}

const handleFormEvent = (evt: FormEvent<HTMLFormElement>): void => {
    
}

const handleMouseEvent = (evt: MouseEvent<HTMLElement>): void => {
    
}

import {
    ChangeEventHandler, // Functiedefinitie voor <T>(evt: ChangeEvent<T>) => void
    FocusEventHandler,  // Functiedefinitie voor <T>(evt: FocusEvent<T>) => void
    FormEventHandler,   // Functiedefinitie voor <T>(evt: FormEvent<T>) => void
    MouseEventHandler,  // Functiedefinitie voor <T>(evt: MouseEvent<T>) => void
} from 'react'

const handleChangeEvent: ChangeEvent<HTMLInputElement> = evt => {

}

const handleFocusEvent: FocusEvent<HTMLElement> = evt => {

}

const handleFormEvent: FormEvent<HTMLFormElement> = evt => {

}

const handleMouseEvent: MouseEvent<HTMLElement> = evt => {

}