Почему MouseEvent в обработчике событий флажка не является универсальным?

92

У меня есть элемент флажка TSX (JSX):

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

С помощью VS кода я знаю , что тип входного параметра из this.handleCheckboxClickэто MouseEvent<HTMLInputElement>. Итак, я реализовал это с помощью:

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

Затем я получаю сообщение об ошибке: [ts] Type 'MouseEvent' is not generic.Как показано на изображении ниже:

введите описание изображения здесь

Версия моих пакетов:

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

Почему это?

reactjs typescript events types jsx Бен
источник

Ответы:

248

Вы, вероятно, используете DOM MouseEvent. Попробуйте использовать React.MouseEvent<HTMLInputElement>вместо этого.

Россопедия
источник
2
У меня не работает, я получаю:type: "checkbox" onChange: (e: MouseEvent<HTMLInputElement>) => void; defaultChec...' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'
Кокодоко
@Kokodoko ты когда-нибудь исправлял это?
SuperUberDuper
6

Чтобы использовать React MouseEvent, просто не забудьте добавить:

import { MouseEvent } from 'react';
Развернуть фрагмент

Гай Энгель
источник
3

Вы можете использовать SyntheticEvent вместо MouseEvent

Sras
источник