I have a React Component with an onChange handler:

// @flow
import React, {Component} from 'react';

export default class MyList extends Component {
  handleChange = (event) => {
    // Do something with event.target.value
    // which will be the value typed in the input field.
  }

  render() {
    return (
      <input type="text" onChange={this.handleChange}> />
    );
  }
}

and Flow plains about this because it is an exported class: Parameter `event` missing annotation

How can I annotate the event parameter in the handleChange function? As far as I know, this event is generated at the JavaScript level and doesn't have any Flow typing.

Alternatively, can Flow be configured to not display these "missing annotation" errors?

I have a React Component with an onChange handler:

// @flow
import React, {Component} from 'react';

export default class MyList extends Component {
  handleChange = (event) => {
    // Do something with event.target.value
    // which will be the value typed in the input field.
  }

  render() {
    return (
      <input type="text" onChange={this.handleChange}> />
    );
  }
}

and Flow plains about this because it is an exported class: Parameter `event` missing annotation

How can I annotate the event parameter in the handleChange function? As far as I know, this event is generated at the JavaScript level and doesn't have any Flow typing.

Alternatively, can Flow be configured to not display these "missing annotation" errors?

• javascript
• reactjs
• flowtype

2 Answers 2

I found another solution, using synthetic events: something like the following

onChange (event: SyntheticInputEvent<EventTarget>): void {
  this.setState({ text: event.target.value })
}

You can find the typings here https://github./facebook/flow/blob/master/lib/dom.js

handleChange = (event: Event) => {
  if (event.target instanceof HTMLInputElement) {
    console.log(event.target.value)
  }
}