React+TypeScript中为div绑定onFocus事件报错的解决求助

我完全懂你碰到这个类型报错的头疼之处——这本质上是因为你把DOM原生的FocusEvent类型和React合成事件体系里的FocusEvent类型搞混了，二者并不是同一个东西。

直接修正方案 #

你需要从React库中导入它自己的FocusEvent类型，并且最好给它指定泛型参数来明确事件绑定的元素类型（比如你的例子里是div元素，对应HTMLDivElement）：

import { FocusEvent } from 'react';

// 类组件中的事件处理方法
private onFocus(event: FocusEvent<HTMLDivElement>) {
  // 这里写你的聚焦逻辑
}

// JSX渲染部分
<div tabIndex={0} onFocus={this.onFocus}> Element </div>

为什么会报错？ #

• React的合成事件对原生DOM事件做了封装，它提供的FocusEvent类型并没有包含原生DOM事件里的initFocusEvent方法（这个方法是比较老旧的DOM API，React合成事件体系没有实现它），所以TypeScript会判定两个FocusEvent类型不兼容。
• 给React的FocusEvent加上泛型参数，还能让TypeScript更精准地推断事件目标的类型，比如你可以通过event.currentTarget获取到正确的div元素类型，提升代码的类型安全性。

补充：函数组件的写法 #

如果是函数组件，逻辑是一样的，只是写法稍有不同：

import { FocusEvent } from 'react';

const MyComponent = () => {
  const handleFocus = (event: FocusEvent<HTMLDivElement>) => {
    // 处理聚焦逻辑
  };

  return <div tabIndex={0} onFocus={handleFocus}> Element </div>;
};

额外检查 #

如果还是有问题，确保你的项目已经安装了React的类型定义包：

npm install @types/react @types/react-dom --save-dev

内容的提问来源于stack exchange，提问作者Nicolas