如何解决在React中提交表单时永远不会调用axios方法
我有一个接受文件上传的表单,但是如果将type="submit"
属性添加到我的“上传”按钮中,则handleSubmit
中的axios方法将永远不会被调用,但是如果我删除了type="submit"
属性并将按钮视为简单的onClick()
操作,通常会调用axios方法。我应该如何解决这个问题?我也在使用react-bootstrap。
编辑:该按钮已附加到表单上,为了简单起见,我没有放置代码
handleSubmit = (e) => {
const data = new FormData();
data.append("file",this.state.selectedFile);
axios
.post("some/path",data,{})
.then((response) => {
console.log("response = " + response);
})
.catch((error) => {
console.log("failed response" + error.response);
});
console.log("file submitted");
};
// code for a form,omiited for simplicity
<Button onClick={this.handleSubmit} type="submit" variant="success" size="md">
Upload
</Button>{" "}
解决方法
您选择其中一个。拥有type=submit
的人正在尝试寻找要为您提交的表单,但是您已经有了一个点击处理程序。同样,您可以使用任何一种方式来处理它,但是由于您已经具有单击处理程序,因此只需保留它并摆脱type=submit
。
在这种情况下,您可能需要在Form标记上添加onsubmit。该按钮(如果为提交类型)将在表单提交时触发。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。