Используйте onFocus на div с React и Typescript

Question

Не могу понять, как использовать событие Focus с React и Typescript:

private onFocus(event: FocusEvent) {

}

...

<div
  tabIndex={0}
  onFocus={this.onFocus}
>
 Element
</div>

С кодом выше я получаю следующую ошибку

Типы свойств onFocus несовместимы.

Тип '(событие: FocusEvent) => void' нельзя назначить типу '((событие: FocusEvent) => void) | не определено.

Тип '(событие: FocusEvent) => void' нельзя назначить типу (событие: FocusEvent) => void '.

Типы параметров «событие» и «событие» несовместимы.

Тип «FocusEvent» нельзя назначить типу «FocusEvent».

Свойство 'initFocusEvent' отсутствует в типе 'FocusEvent'.

Я попробовал несколько подходов, чтобы попытаться сделать компилятор Typescript счастливым, но, похоже, ничего не работает.

Answer 1

Судя по ошибке, вы используете неправильный тип FocusEvent - вы обрабатываете синтетическое событие React, поэтому вам нужно использовать тип React.

Я не получаю ошибок сследующий обработчик (ваши результаты могут отличаться в зависимости от вашей версии response.d.ts):

import {FocusEvent} from 'react'
...
private onFocus(ev: FocusEvent<any>){
    console.log(ev);
}