在带有 React 和 Typescript 的 div 上使用 onFocus

Question

我不知道如何在 React 和 Typescript 中使用 Focus 事件：

private onFocus(event: FocusEvent) {

}

...

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

使用上面的代码，我收到以下错误

属性“onFocus”的类型不兼容。

类型 '(event: FocusEvent) => void' 不可分配给类型 '((event: FocusEvent) => void) | 不明确的'。

类型 '(event: FocusEvent) => void' 不可分配给类型 '(event: FocusEvent) => void'。

参数“事件”和“事件”的类型不兼容。

“FocusEvent”类型不可分配给“FocusEvent”类型。

“FocusEvent”类型中缺少“initFocusEvent”属性。

我尝试了很多方法来让 Typescript 编译器满意，但似乎没有任何效果。

Answer 1

根据错误，您似乎使用了错误的 FocusEvent 类型 - 您正在处理 React 合成事件，因此您需要使用 React 类型。

以下处理程序没有出现错误（您的结果可能因您的 react.d.ts 版本而异）：

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