React components use functions to respond to events. These are called event handler functions, and they're passed an event object as an argument when the React event system calls them. It can be useful to use Flow to explicitly type these event arguments to make sure that your event handler is getting the type of element that it expects.
For example, assume that you're working on a component that responds to clicks from an <a>
element. Your event handler function also needs to interact with the clicked element, in order to get the href
property. Using the Flow types exposed by React, you can ensure that the correct element type is indeed triggering the event that is causing your function to run:
// @flow import * as React from 'react'; import { Component } from 'react'; class EventHandler extends Component<{}> { clickHandler = (e: SyntheticEvent<HTMLAnchorElement>): void => { e.preventDefault(); console.log('clicked', e.currentTarget...