无法分配提交事件类型

Question

基本上就是标题。代码如下：

 const handleSubmit = (e: React.FormEventHandler<HTMLFormElement>) => {
    // e.preventDefault()
  }

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

这是错误的完整详细信息：

Type '(e: React.FormEventHandler<HTMLFormElement>) => void' is not assignable to type 'FormEventHandler<HTMLFormElement>'.
  Types of parameters 'e' and 'event' are incompatible.
    Type 'FormEvent<HTMLFormElement>' is not assignable to type 'FormEventHandler<HTMLFormElement>'.
      Type 'FormEvent<HTMLFormElement>' provides no match for the signature '(event: FormEvent<HTMLFormElement>): void'.ts(2322)
index.d.ts(1380, 9): The expected type comes from property 'onSubmit' which is declared here on type 'DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>

Answer 1

我们必须React.FormEvent<HTMLFormElement>为表单事件使用 type。

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // e.preventDefault()
}

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

React.FormEventHandler<HTMLFormElement>是用于处理表单元素的处理程序类型。

React.FormEventHandler<HTMLFormElement>导致以下函数类型

(e: React.FormEvent<HTMLFormElement>) => void;

如果需要，您甚至可以FormEventHandler为您的函数指定类型，handleSubmit

const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e: React.FormEvent<HTMLFormElement>) => {
  // e.preventDefault()
};