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

reactjs typescript events types jsx
Ben picture Ben · Jun 26, 2017 · Viewed 23.5k times · Source

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:

enter image description here

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?

Answer

rossipedia picture rossipedia · Jun 26, 2017

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

Related questions

Typescript input onchange event.target.value

In my react and typescript app, I use: onChange={(e) => data.motto = (e.target as any).value}. How do I correctly define the typings for the class, so I wouldn't have to hack my way around the type system …

Read More
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema

I have this simple helloworld react app created from an online course, however I get this error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown …

Read More
Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

i am currently making a simple react application. this is my index.tsx import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './components/App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render( <App />, document.…

Read More