Inertia、React与TypeScript中<Form>组件的类型定义问题

嘿，我之前也碰到过一模一样的问题！你用HTMLFormElement会报错，是因为Inertia的<Form>组件并不是原生的HTML表单元素，它是Inertia封装后的自定义组件，ref指向的实例类型和原生表单完全不一样，TypeScript当然会报警告啦。

给你两个靠谱的解决方案，都能彻底解决这个类型警告：

方案一：使用Inertia官方导出的类型 #

Inertia的React库已经为Form组件的实例提供了对应的类型FormInstance，你只需要从库中导入它，然后用它来标注ref的类型就行：

import { useRef } from 'react'
import { Form, FormInstance } from '@inertiajs/react'

export default function CreateUser() {
  // 用FormInstance作为ref的类型，默认值为null
  const formRef = useRef<FormInstance | null>(null)

  const handleSubmit = () => {
    // 这里加上可选链操作符更安全，避免null报错
    formRef.current?.submit()
  }

  return (
    <>
      <Form ref={formRef} action="/users" method="post">
        <input type="text" name="name" />
        <button type="submit">Submit</button>
      </Form>
      <button onClick={handleSubmit}>Submit Programmatically</button>
    </>
  )
}

方案二：自动推导组件类型（更灵活） #

如果你的Inertia版本没有直接导出FormInstance，或者你不想依赖库的导出类型，可以用React.ElementRef来自动推导Form组件的实例类型：

import { useRef, ElementRef } from 'react'
import { Form } from '@inertiajs/react'

export default function CreateUser() {
  // 自动推导Form组件的实例类型
  const formRef = useRef<ElementRef<typeof Form> | null>(null)

  const handleSubmit = () => {
    formRef.current?.submit()
  }

  return (
    <>
      <Form ref={formRef} action="/users" method="post">
        <input type="text" name="name" />
        <button type="submit">Submit</button>
      </Form>
      <button onClick={handleSubmit}>Submit Programmatically</button>
    </>
  )
}

为啥之前的写法不行？ #

你之前用HTMLFormElement是把ref的类型和原生表单绑定了，但Inertia的Form组件内部虽然会渲染原生表单，但ref传递的是Inertia自己封装的实例对象，这个实例上有submit()方法，但它不是原生的DOM元素，所以TypeScript会判定类型不匹配，给出警告。

这样调整之后，你的IDE里的TypeScript警告应该就完全消失了，亲测有效！

内容来源于stack exchange