React JS - onChange срабатывает дважды - PullRequest
Новая
       14

React JS - onChange срабатывает дважды

0 голосов
/ 26 ноября 2018

Когда я загружаю изображение с помощью response-image-uploader, onchange срабатывает дважды.поэтому он дважды пытается загрузить изображение на сервер, вот как я его обрабатываю: 

//user uploads image to app
<ImageUploader
   buttonClassName={"btn add-btn bg-orange"}
   buttonText='ADD'
   onChange={this.newProfilePicture}
   imgExtension={['.jpg', '.gif', '.png', '.gif']}
   maxFileSize={5242880}
   fileSizeError="file size is too big"
   fileTypeError="this file type is not supported"
   singleImage={true}
   withPreview={true}
   label={""}
   withIcon={false}
/>



 //image is set to this.userprofilepicture
    newProfilePicture = (picture) => {
    this.setState({ userprofilepicture: picture});
    this.setNewProfilePicture();
    ShowAll();
}

//new profilepicture is uploaded to api
setNewProfilePicture = () => {
    let data = new FormData();
    console.log('profile picture: ', this.state.userprofilepicture)
    data.append('Key', 'profilePicture');
    data.append('Value', this.state.userprofilepicture)
    this.sendUpdatedPicture('uploadprofilepicture', data);
}

Есть ли способ заставить его запускаться только один раз?

1 Ответ

0 голосов
/ 26 ноября 2018 
<ImageUploader
   buttonClassName={"btn add-btn bg-orange"}
   buttonText='ADD'
   onChange={event => this.newProfilePicture(event)}
   imgExtension={['.jpg', '.gif', '.png', '.gif']}
   maxFileSize={5242880}
   fileSizeError="file size is too big"
   fileTypeError="this file type is not supported"
   singleImage={true}
   withPreview={true}
   label={""}
   withIcon={false}
/>

и в функции 

newProfilePicture = event => {
  event.preventDefault();
  event.stopPropagation();
  ...your code...
}

Это должно решить вашу проблему, здесь мы останавливаем событие, которое будет распространено на следующий уровень.Так что onChange выполняется только один раз.

...