TypeScript使用EmailJS提交表单时e.target类型报错ts(2345)求助

TypeScript中React.FormEvent的target属性默认类型为EventTarget，即使你给事件声明了HTMLFormElement的泛型，TS也不会自动将target推导为HTMLFormElement类型：因为事件冒泡机制下target可能指向表单内的子元素（比如你点击的提交按钮），TS无法确定target一定是表单元素，因此抛出类型不匹配的ts(2345错误。

优先推荐使用更安全的currentTarget代替target：
Event对象的currentTarget指向的是绑定事件处理函数的元素，你的onSubmit事件直接绑定在form标签上，所以e.currentTarget必然是HTMLFormElement类型，且你声明的泛型React.FormEvent<HTMLFormElement>会直接作用于currentTarget，不需要额外类型断言。

修改你的sendEmail函数即可：

function sendEmail(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();

  emailjs
    // 把e.target替换为e.currentTarget
    .sendForm("gmail", "websiteID",  e.currentTarget, "user_ID")
    .then(
      (result) => {
        console.log(result.text);
        // 建议把成功提示移到这里，避免发送失败也弹出成功提醒
        setOpen(true);
      },
      (error) => {
        console.log(error.text);
        // 可自行补充发送失败的提示逻辑
      }
    );
  // 这里也替换为e.currentTarget
  e.currentTarget.reset()
}

修改后可以把<Button>上的onClick={handleClick}属性删除，避免还没收到发送结果就提前弹出成功提示。

如果你一定要使用target，可以选择类型断言方案，手动告知TSe.target的类型为HTMLFormElement：

// 仅修改这两处的类型断言即可
.sendForm("gmail", "websiteID",  e.target as HTMLFormElement, "user_ID")
(e.target as HTMLFormElement).reset()

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