在 React 中提交表单时永远不会调用 axios 方法答案

【问题标题】：axios method never gets called upon form submission in React在 React 中提交表单时永远不会调用 axios 方法
【发布时间】：2020-08-14 13:59:56
【问题描述】：

我有一个接受文件上传的表单，但如果我将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" 仅适用于表单

标签： javascript reactjs react-bootstrap

【解决方案1】：

您可以选择其中一个。拥有type=submit 正在尝试查找要为您提交的表单，但您已经有一个点击处理程序。同样，您可以用任何一种方式处理它，但由于您已经有一个点击处理程序，只需保留它并摆脱 type=submit。

【讨论】：

【解决方案2】：

在这种情况下，您可能需要在表单标签上添加 onsubmit。按钮（如果作为提交类型存在）会触发表单的提交。

【讨论】：