React Typescript onSubmit 类型答案

【问题标题】：React Typescript onSubmit typeReact Typescript onSubmit 类型
【发布时间】：2022-08-07 23:12:12
【问题描述】：

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

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

该错误表明我不能将any 的类型放在

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

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

const onSubmitHandler = (
e: SyntheticEvent<HTMLFormElement>,
setVerificationId: Dispatch<SetStateAction<string>>, 
setVerificationToken: Dispatch<SetStateAction<VerificationStatus>>): TRYING_TO_RESOLVE_WHAT_THIS_TYPE_IS => {
        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}>

表格从何而来？不知道 Form 是如何定义的，很难说。那是你写的组件吗？是来自某个 3rd 方库吗？
@JeremyK <Form /> 是从语义 ui-react 导入的。它主要表现为正常形式:)
我从来没有使用过那个组件库，乍一看他们的文档，函数语法是什么并不明显。如果它只是 <form/> 元素的包装器，我希望以下内容是您所需要的。 const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {}; 但是默认提交没有我知道的第二个参数？您能否更新问题以包含完整的打字稿错误？
@JeremyK 谢谢！抱歉，不清楚我要解决什么类型，我正在尝试解决函数的类型，据我所知这是导致问题的原因？

标签： reactjs typescript

【解决方案1】：

这应该是SyntheticEvent

【讨论】：

谢谢 - 这有助于输入 e 我的问题是实际函数的类型。 const onSubmitHandler = (e: any, setVerificationId: any, setVerificationToken: any): THIS_TYPE_HERE => {}
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

React 中的提交处理函数在类型方面应如下所示：

 function sumbit(e: React.FormEvent<HTMLFormElement>) {
    // you can return whatever you want or nothing
 }
 
 // or 
 
  function sumbit(e: React.SyntheticEvent<HTMLFormElement>) {
    // you can return whatever you want or nothing
 }

当您的提交处理函数需要其他参数时，您可以使用箭头函数这样做：

<form 
  id="not-the-form" 
  role="form" action="/"
  onSubmit={e=>onSubmitHandler(e,setVerificationId, setVerificationToken )}
>
</form>

【讨论】：

傻我。是的，只是传递（e）确实有效，也许我专注于错误的事情。无论如何感谢您的帮助！

【解决方案3】：

我刚刚提取了语义用户界面反应库并进行了测试。以下适用于打字稿（假设您使用的是第二个参数）。

import React from "react";
import { Form, FormProps } from "semantic-ui-react";

const Component = () => {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>, data: FormProps) => {/* your code */};
  return (
      <Form onSubmit={handleSubmit} />
  );
};

如果您不使用 data 参数，那么您将拥有

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { /* your code */};

您认为打字稿抱怨的返回类型被打字稿自动确定为“无效”，因为该函数没有返回任何值。

编辑：您的问题似乎已经改变，您的处理程序现在有 3 个参数。 html <form/> 元素或 semantic-ui-react <Form/> onSubmit 函数签名都不匹配您传递的内容。听起来您想将自定义参数传递给您的处理程序。在这种情况下，您需要具有更高阶的功能。

const onSubmitHandler = (setVerificationId: type, setVerificationToken: type) = (e: React.FormEvent<HTMLFormElement>) => { /* your code */}

// calling code
<Form onSubmit={onSubmitHandler(setVerificationId, setVerificationToken)}>

【讨论】：