reactjs - React Typescript onSubmit 类型

Question

我在创建 onSubmit 函数并为其指定类型时遇到问题。

在通常为函数设置类型的第一行，无论我似乎给出任何或未知的内容，我都会看到错误。

该错误表明我无法将 any 的类型放在

的类型上

(event: FormEvent<HTMLFormElement>, data: FormProps) => void

但即使我确实给了它这个确切的建议类型，我仍然返回一个错误。

const onSubmitHandler = (e: any, setVerificationId: any, setVerificationToken: any) => {
        e.preventDefault()
        setUserData({
            platform: '',
            name: {
                givenNames: givenNames ? givenNames : memberDetails.memberNameDetails.givenNames,
                surname: surname ? surname : memberDetails.memberNameDetails.lastName
            },
            email: email,
            dob: formattedDateOfBirth,
            currentAddress: {
                line1: streetNameInformation,
                postCode: postCode,
                suburb: suburb,
                state: state,
                country: country,
            }})

        aService.postVerificationRegister(userData)
            .then(response => {
                setVerificationId(response.verificationId)
                setVerificationToken(response.verificationToken)
            })
            .catch((e) => console.error("There was an error getting a verification token", e))
}

<Form id="not-the-form" role="form" action="/" onSubmit={onSubmitHandler}>

如有任何帮助，我们将不胜感激，谢谢!

Answer 1

React 中的提交处理函数在类型上可能如下所示:

import { FormEvent } from "react";

function onSumbitHandler(e: FormEvent<HTMLFormElement>) {
  // ...
}

<form onSubmit={onSumbitHandler}></form>

如果您的提交处理函数需要其他类型的参数，您可以使用箭头函数来完成此操作:

<form
  onSubmit={(e) =>
    onSubmitHandler(e, setVerificationId, setVerificationToken)
  }
></form>