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

Question

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?

score 499 · Accepted Answer · answered Jun 26 '17 at 16:33

499

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

answered Jun 26 '17 at 16:33

rossipedia

56,800
10
90
93

3

Not working for me, I get: `type: "checkbox" onChange: (e: MouseEvent) => void; defaultChec...' is not assignable to type 'InputHTMLAttributes'` – Kokodoko Aug 13 '17 at 21:23
@Kokodoko did you ever fix this? – SuperUberDuper Nov 17 '17 at 12:27
3

Thanks, this helped me on my way! my click event now looks like `clickHandler?: (event?: MouseEvent) => void;` - hopefully that helps someone else :) – Joel Balmer Feb 15 '21 at 10:05

score 40 · Answer 2 · edited Aug 12 '21 at 08:22

40

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

import { MouseEvent } from 'react';

edited Aug 12 '21 at 08:22

Penny Liu

15,447
5
79
98

answered Jan 23 '20 at 11:43

Guy Engel

2,436
1
17
13

1

Also worked with a similar problem that I was having with KeyboardEvent. Thanks! – Felipe Souza Aug 24 '22 at 20:22

score 8 · Answer 3 · answered Sep 09 '19 at 11:11

8

You can use SyntheticEvent instead of MouseEvent

answered Sep 09 '19 at 11:11

Sras

1,686
2
19
29

score 3 · Answer 4 · answered Feb 03 '23 at 11:02

3

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

import { MouseEvent, MouseEventHandler } from 'react';

answered Feb 03 '23 at 11:02

Wadzio

31
1

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

4 Answers4