Dlaczego „MouseEvent” w programie obsługi zdarzeń pola wyboru nie jest ogólne?

Question 1

Mam element checkbox TSX (JSX):

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

Z pomocą kodu VS wiem, że typ parametru wejściowego this.handleCheckboxClickto MouseEvent<HTMLInputElement>. Więc zaimplementowałem to z:

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

Następnie [ts] Type 'MouseEvent' is not generic.pojawia się błąd mówiący, jak pokazano na poniższym obrazku:

Wersja moich pakietów:

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

Dlaczego?

Question 2

Prawdopodobnie używasz DOM MouseEvent. Spróbuj użyć React.MouseEvent<HTMLInputElement>zamiast tego.

Question 3

Aby skorzystać z React MouseEvent, po prostu dodaj:

import { MouseEvent } from 'react';

Rozwiń fragment

Question 4

Możesz użyć SyntheticEvent zamiast MouseEvent

Answer 1

Mam element checkbox TSX (JSX):

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

Z pomocą kodu VS wiem, że typ parametru wejściowego this.handleCheckboxClickto MouseEvent<HTMLInputElement>. Więc zaimplementowałem to z:

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

Następnie [ts] Type 'MouseEvent' is not generic.pojawia się błąd mówiący, jak pokazano na poniższym obrazku:

Wersja moich pakietów:

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

Dlaczego?

Answer 2

248

Prawdopodobnie używasz DOM MouseEvent. Spróbuj użyć React.MouseEvent<HTMLInputElement>zamiast tego.

rossipedia
źródło

2

Nie działa dla mnie, otrzymuję:

type: "checkbox" onChange: (e: MouseEvent<HTMLInputElement>) => void; defaultChec...' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'

Kokodoko

@Kokodoko czy kiedykolwiek to naprawiłeś?

SuperUberDuper

Answer 3

2