Warum ist das `MouseEvent` im Checkbox-Ereignishandler nicht generisch?

95

Ich habe ein Kontrollkästchen TSX (JSX) -Element:

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

Mit Hilfe von VS-Code weiß ich, dass der Eingabeparametertyp der this.handleCheckboxClickist MouseEvent<HTMLInputElement>. Also habe ich es implementiert mit:

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

Dann erhalte ich die Fehlermeldung [ts] Type 'MouseEvent' is not generic.Wie im Bild unten gezeigt:

Geben Sie hier die Bildbeschreibung ein

Version meiner Pakete:

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

Warum ist das so?

reactjs typescript events types jsx Ben
quelle

Antworten:

257

Sie verwenden wahrscheinlich das DOM MouseEvent. Versuchen Sie es React.MouseEvent<HTMLInputElement>stattdessen.

rossipedia
quelle
2
Ich arbeite nicht für mich und bekomme:type: "checkbox" onChange: (e: MouseEvent<HTMLInputElement>) => void; defaultChec...' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'
Kokodoko
@ Kokodoko hast du das jemals behoben?
SuperUberDuper
7

Um React MouseEvent zu verwenden, müssen Sie Folgendes hinzufügen:

import { MouseEvent } from 'react';
Erweitern Sie das Snippet

Guy Engel
quelle
3

Sie können SyntheticEvent anstelle von MouseEvent verwenden

Sras
quelle