Why is the React `MouseEvent` in the checkbox event handler not generic?

I have an checkbox TSX(JSX) element:

<input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> 

With the help of VS code I know that the input parameter type of the this.handleCheckboxClick is MouseEvent<HTMLInputElement>. So I implemented it with:

private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } 

Then I get an error saying [ts] Type 'MouseEvent' is not generic. As shown in the image below:

Version of my packages:

"@types/react": "^15.0.29", "@types/react-dom": "^15.5.0", "react": "^15.6.1", "react-dom": "^15.6.1", "typescript": "^2.3.4", 

Why is that?

4 Answers

You're probably using the DOM MouseEvent. Try using React.MouseEvent<HTMLInputElement> instead.

In order to use React MouseEvent just make sure to add:

import { MouseEvent } from 'react'; 

You can use SyntheticEvent instead of MouseEvent

You just need to check if you are importing your event from React.

import { MouseEvent, MouseEventHandler } from 'react';