“EventTarget”类型的参数不可分配给“HTMLFormElement”类型的参数

Question

在我的屏幕上，我试图定义一个函数来处理表单的提交，但是，我遇到了打字稿错误的问题：

Argument of type 'EventTarget' is not assignable to parameter of type 'HTMLFormElement'

我的代码如下所示：

import React, { FormEvent } from 'react';
import Form from 'react-bootstrap/Form';
import LoadingButton from '../shared/LoadingButton';
import { useSignIn } from '../../hooks/Auth/useSignIn';
import { useHistory } from 'react-router-dom';
import ErrorIndicator from '../shared/ErrorIndicator';

function SignIn() {
    const { mutateAsync, error, isError, isLoading } = useSignIn();
    const history = useHistory();

    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        const data = new FormData(event.target); // Error appears here
        const email = data.get('email')!;
        const password = data.get('password')!;

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

    return (
        <Form onSubmit={handleSubmit} className='py-3'>
            ...
        </Form>
    );
}

我尝试将参数的类型handleSubmit从更改FormEvent<HTMLFormElement>为FormEvent<EventTarget>，但是，这并不能解决错误。

Answer 1

正如 CATS 和 Konrad Linkowski 所评论的，它应该是event.currentTarget而不是event.target因为事件冒泡