Блог

У меня есть форма, которая принимает файл для загрузки, но если я добавлю type="submit" атрибут к моей кнопке «загрузить», метод axios в 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>{" "}
  

Вы выбираете один или другой. Having type=submit пытается найти форму для отправки для вас, но у вас уже есть обработчик кликов. Опять же, вы можете справиться с этим любым способом, но поскольку у вас уже есть обработчик кликов, просто сохраните его и избавьтесь от type=submit .

В этом случае вам может потребоваться добавить onsubmit в тег формы. Кнопка, если она присутствует в виде типа отправки, срабатывает при отправке формы.