在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。该按钮（如果为提交类型）将在表单提交时触发。