React+TypeScript表单提交报错：EventTarget无法赋值给HTMLFormElement

你遇到的问题是因为event.target的类型是EventTarget，而FormData构造函数需要的是HTMLFormElement类型的参数。虽然你给FormEvent指定了HTMLFormElement泛型，但target可能指向表单内的子元素（比如触发提交的按钮），导致TypeScript无法确定它的具体类型。

最优解决方案：使用event.currentTarget #

currentTarget始终指向绑定事件处理函数的元素（也就是你的<Form>组件对应的原生表单元素），它的类型会被TypeScript正确推断为HTMLFormElement，直接替换即可：

const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget); // 替换为currentTarget
    const email = data.get('email')!;
    const password = data.get('password')!;

    await mutateAsync({ email, password });
    history.push('/dashboard');
};

备选方案：类型断言（不推荐） #

如果因为某些原因必须用target，可以手动添加类型断言告诉TypeScript它的具体类型，但这种方式不如currentTarget安全，因为如果事件冒泡到其他元素可能会出错：

const data = new FormData(event.target as HTMLFormElement);

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