如何解决向 React 功能组件中的表单添加功能
我有一个表单组件,在提交时使用 multer 将照片上传到我的服务器,然后通过单个上传路径上传到 AWS 上的 S3 存储桶。我想添加一行额外的功能,将来自 S3 的照片密钥存储在前端的状态,然后我将与用户对象一起存储在数据库中,以便照片始终与用户(个人资料图片)相关联。>
表单使用 action 参数按照当前设置正确发送,但我不确定如何将 submitHandler 函数正确实现到表单中。如果我从它中断的表单中删除 action 参数,如果我使用 onSubmit 它似乎也会中断。我确信这是一个非常简单的方法,但我无法弄清楚。非常感谢任何帮助。
import React from 'react';
import axios from 'axios';
//setProfilePhoto is the set method for state from props
const UploadForm = ({setProfilePhoto}) => {
const submitHandler = async (e) => {
e.preventDefault();
const result = await axios.post('http://localhost:8000/api/upload');
console.log(result.key)
setProfilePhoto(result.key)
}
return(
<form action="http://localhost:8000/api/upload" encType='multipart/form-data' method='POST'>
<input type='file' name='photo' />
<input type='submit' value="submit" />
</form>
)
}
export default UploadForm;
解决方法
尝试将这一行删除。 .await
用一个按钮代替它。
然后将 onSubmit 处理程序添加到表单标记,而不是按钮。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。