¿Por qué el `MouseEvent` en el controlador de eventos de la casilla de verificación no es genérico?

92

Tengo un elemento de casilla de verificación TSX (JSX):

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

Con la ayuda del código VS, sé que el tipo de parámetro de entrada de this.handleCheckboxClickis MouseEvent<HTMLInputElement>. Entonces lo implementé con:

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

Luego [ts] Type 'MouseEvent' is not generic.aparece un error que dice como se muestra en la imagen a continuación:

ingrese la descripción de la imagen aquí

Versión de mis paquetes:

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

¿Porqué es eso?

reactjs typescript events types jsx Ben
fuente

Respuestas:

248

Probablemente estés usando DOM MouseEvent. Intente usar en su React.MouseEvent<HTMLInputElement>lugar.

rossipedia
fuente
2
No funciona para mí, obtengo:type: "checkbox" onChange: (e: MouseEvent<HTMLInputElement>) => void; defaultChec...' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'
Kokodoko
@Kokodoko, ¿alguna vez arreglaste esto?
SuperUberDuper
6

Para usar React MouseEvent solo asegúrese de agregar:

import { MouseEvent } from 'react';
Expandir fragmento

Guy Engel
fuente
3

Puede utilizar SyntheticEvent en lugar de MouseEvent

Sras
fuente