提交表单时对表单元素的引用为空

Posted 2023-02-21

【中文标题】提交表单时对表单元素的引用为空

【英文标题】：ref to form element is null when submitting the form

【发布时间】：2022-01-23 20:25:11

【问题描述】：

我有一个表单应该将文件（图像）上传到 NextJs API 路由。我尝试使用表单的引用来检索表单值。但是，当我尝试在 onSubmit 函数中访问表单时，引用仍然为空。我知道 refs 在第一次渲染时可以为 null，但我假设在提交表单时，应该解析 ref。

这是表单的样子：

<form ref=formRef onSubmit=onFormSubmit>
  <label htmlFor="image">Image:</label>
  <input id="image" accept="image/*" multiple=false onChange=onImageChange name="image" type="file" required />
  <button type="submit">Upload</button>
</form>

这是（函数）组件的其余部分的样子：

const UploadImageModal = (): JSX.Element => 
  const formRef = useRef<HTMLFormElement>(null)
  const onFormSubmit = async (event: SubmitEvent) => 
    event.preventDefault()
    console.log(formRef.current) //Shows null
    const data = new FormData(formRef.current)
    const res = await fetch('/api/upload-image', 
      method: 'POST',
      body: data
    )
  
  
  return (/* The component including the form */)

我正在使用 TypeScript，但我认为这无关紧要，因为 TypeScript 在运行时没有影响。我遗漏了我认为与这个问题无关的任何内容，例如样式和其他不触及表单的组件。

API 路由已经使用 Postman 进行了测试，并且可以正常工作。如果有办法直接从 SubmitEvent 获取表单数据，那也是一个很好的解决方案。我以为表单数据会通过那个事件暴露出来，但它并没有让我到任何地方。

感谢任何花时间帮助我的人！

【问题讨论】：

您能提供完整组件的代码吗？到目前为止，我无法使用您提供的代码重现该问题。

【参考方案1】：

你可以通过

获取表单DOM引用

const data = new FormData(event.target)

[信息] 您正在使用打字稿，所以处理程序的类型应该是

const onFormSubmit: FormEventHandler<HTMLFormElement > = async (event) => 

【讨论】：

谢谢！您的解决方案效果很好。但是，由于它不能解决缺少参考的问题，我还没有将答案标记为已接受（尚未）。也感谢您提供额外的信息。我最近才开始在 React 中使用 TypeScript，所以有时我会忘记输入某些内容。生产版本会让我大吃一惊；）

【参考方案2】：

我附上了工作代码和下面的 Codesandbox。 https://codesandbox.io/s/react-functional-component-form-usage-with-typescript-16ghf?file=/src/App.tsx

import "./styles.css";
import  SyntheticEvent, useRef  from "react";

const UploadImageModal = (): JSX.Element => 
  const formRef = useRef() as React.MutableRefObject<HTMLFormElement>;

  const onFormSubmit = async (event: SyntheticEvent) => 
    event.preventDefault();
    console.log(formRef); //Shows null
    const data = new FormData(formRef.current);
    const res = await fetch("/api/upload-image", 
      method: "POST",
      body: data
    );
  ;

  return (
    <form ref=formRef onSubmit=onFormSubmit>
      <label htmlFor="image">Image:</label>
      <input
        id="image"
        accept="image/*"
        multiple=false
        name="image"
        type="file"
        required
      />
      <button type="submit">Upload</button>
    </form>
  );
;

export default function App() 
  return (
    <div className="App">
      <UploadImageModal />
    </div>
  );

【讨论】：

您好，感谢您的回复。您能否解释一下您为修复缺少的表单参考所做的更改？我只注意到一些额外/不同的打字和额外的代码，使示例在代码和框中实际运行（谢谢）

额外/不同的输入可能是问题所在。你能提供 tsconfig.json 吗？还要考虑您的拼写错误，例如type="file required />

谢谢我修正了错字。它只存在于问题中，而不是我的代码中，但很好。问题是，在运行 tsc 时，它编译得很好。编译后，typescript 不再执行任何操作，因此不会导致任何运行时错误。