Question

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

2021-12-22

1396

reactjs forms file-upload react-hooks next.js

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

表单如下所示：

<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 获取表单数据，那也是一个很好的解决方案。我以为表单数据会通过该事件公开，但它没有给我带来任何帮助。

感谢花时间帮助我的人！

Answer 1

您可以通过以下方式获取表单 DOM 引用

const data = new FormData(event.target)

[info] 您正在使用 typescript，因此处理程序的类型应该是

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

Answer 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>
  );
}