双列巨型菜单hover联动开发遇TypeScript报错：EventTarget无innerText属性

• TypeScript是强类型检查语言，EventTarget是所有事件目标的通用类型，它本身并不包含innerText属性——事件触发的目标可能是任何实现了EventTarget的对象（比如window、XMLHttpRequest等），并非一定是DOM元素，所以TS会阻止你直接访问不存在的属性。

提供三种可行方案，按推荐程度排序：

方案1：使用currentTarget（最推荐） #

e.currentTarget指向的是绑定事件的那个DOM元素（也就是你的Grid组件对应的元素），它的类型默认就是HTMLElement，可以直接安全访问innerText：

const [megaMenu, setMegaMenu] = useState("");

return (
  <Grid onMouseEnter={(e) => setMegaMenu(e.currentTarget.innerText)}>
    {/* ... */}
  </Grid>
)

方案2：类型断言 #

如果确定e.target就是DOM元素，可以用类型断言告诉TS它的真实类型：

const [megaMenu, setMegaMenu] = useState("");

return (
  <Grid onMouseEnter={(e) => setMegaMenu((e.target as HTMLElement).innerText)}>
    {/* ... */}
  </Grid>
)

注意：如果e.target不是DOM元素（比如事件冒泡到非元素目标），这种写法可能在运行时出错，所以仅当你能确保目标一定是DOM元素时使用。

方案3：类型守卫+可选链（最安全） #

通过类型守卫判断目标是否为HTMLElement，同时避免空值问题：

const [megaMenu, setMegaMenu] = useState("");

return (
  <Grid onMouseEnter={(e) => {
    if (e.target instanceof HTMLElement) {
      setMegaMenu(e.target.innerText);
    }
  }}>
    {/* ... */}
  </Grid>
)

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