Блог

Главная - Вопросы по программированию - Страница обновляется при последующих отправках

Страница обновляется при последующих отправках

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытался отправить файл (изображение) и тест в форме. У них обоих есть отдельные кнопки, но сначала необходимо нажать кнопку file, чтобы путь к изображению был добавлен в состояние данных post вопроса.

Однако по какой-то причине страница обновляется после 2-й или 3-й загрузки изображения. Это происходит только при загрузке файла.

 // image upload form 
  <form onSubmit={handleImageUpload} encType="multipart/form-data">
              <input
                type="file"
                name="photo"
                onChange={handleFileChange}
              />
              <button type="submit" className="btn"> submit </button>
            </form>
  
   const handleImageUpload = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('photo', file);
    axios.post(uploadAPI, formData).then(res => setPost({...post, image: res.data.file}));
  }

Комментарии:

1. Не могли бы вы подробнее рассказать о том, как продвигается процесс, поэтому вы загружаете три раза подряд с одной и той же формой или? В любом случае, я думаю, что ваша кнопка может быть виновником <button type="submit" className="btn"> submit </button> , вы e.preventDefault() тоже пробовали там?

2. @MrShumar, который, казалось, исправил это, спасибо. Есть ли причина, по которой вам нужны два отдельных e.preventDefault() ?

3. Браузер запускает отправку в форме при каждом нажатии кнопки, которая находится внутри формы

Ответ №1:

замена функции onClick на дескриптор и onSubmit вызов e.preventDefault() исправили мою проблему с наличием нескольких форм на странице и случайными обновлениями после последовательной отправки разных форм.

 
<form onSubmit={(e) => {e.preventDefault()}} encType="multipart/form-data">
              <input
                type="file"
                name="photo"
                onChange={handleFileChange}
              />
              <button type="submit" className="btn" onClick={handleImageUpload}> submit </button>
</form>