我已经在我的应用程序中添加了一个表格。当我将表单数据发送到本地服务器时,我将创建一个带有标题的图像。当我附加图像时,我应该使用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/