在带有 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'。

参数'event'和'event'的类型不兼容。

类型“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);
}