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

Question

我有一个接受要上传的文件的表单，但是如果我将type="submit"属性添加到我的“上传”按钮，handleSubmit 中的handleSubmit方法永远不会被调用，但是如果我删除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>{" "}

Answer 1

你选择一个或另一个。 有type=submit试图找到一个表单来为你提交，但你已经有一个点击处理程序。 同样，你可以用任何一种方式处理它，但由于你已经有一个点击处理程序，只需保留它并去掉type=submit 。

Answer 2

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