我已经在我的应用程序中添加了一个表格。当我将表单数据发送到本地服务器时,我将创建一个带有标题的图像。当我附加图像时,我应该使用input type="file"。另外,我应该在我的应用程序中使用FormData。

但是,当我编写组件时,在代码中注释的两行中有一个'formElem' is not defined错误。我如何解决它?

这是我的组件代码:

const AddImage = (props) => {
     formElem.onsubmit = async (e) => {         // ERROR THERE
       e.preventDefault();

          try {
              const response = await api(`${imageRoute}`, {
                  method:'POST',
                  body: new FormData(formElem),    // ERROR THERE
              });

          } catch(e) {
              console.error(e);
          }
    };

   return (

    <div className="formImage">

       <form id="formElem">
          <input type="text" name="name" value=""/>
          <input type="text" name="surname" value=""/>
          <input type="file" name="picture" accept="image/*"/>

        <div className="formButtonImage">
          <button type="submit">Add</button>
        </div>

       </form>
   </div>
   );
};

最佳答案

您的代码中存在很多问题,但这应该可以解决其中的大多数问题:

import React, { useRef } from "react";

const AddImage = (props) => {
  const formRef = useRef();

  const handleSubmit = async (event) => {
    event.preventDefault();
    const data = new FormData(formRef.current);
    // Let's assume that api and imageRoute SOMEHOW exists
    try {
      const response = await api(imageRoute, {
        method: 'POST',
        body: data,    // ERROR THERE
      });
    } catch(e) {
      console.error(e);
    }
  };

  return (
    <div className="formImage">
      <form onSubmit={handleSubmit} ref={formRef}>
        <input type="text" name="name" />
        <input type="text" name="surname" />
        <input type="file" name="picture" accept="image/*" />

        <div className="formButtonImage">
          <button type="submit">Add</button>
        </div>
      </form>
    </div>
  );
}

确保从表单元素中删除value="",否则React会将它们视为受控对象,并且您将无法实际写入它们。

关于javascript - 如何在我的React应用程序中正确编写FormData?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/61837682/

10-12 12:32
查看更多