evt.target renvoie toujours la première entrée de la liste d'entrée

Question

J'ai un téléchargeur de fichier de réaction qui permet aux utilisateurs d'attacher plusieurs pièces jointes. Chaque fois qu'un utilisateur clique sur une entrée, je lis le data-index pour vérifier la position de l'entrée.

renderFileUploader() { 
     let file_attachment = this.state.file_attachment.map(function (b, i) { 
      console.log("Checking the value of i in here"); 
      console.log(i); /// Shows expected values (0..x) 
     return (
        <li key={i}> 
         <div className="attach-file-input"> 
          <div className={b[3]}> 
           <label htmlFor="file_attachment"><i className={b[4]}></i></label> 
           <input type="file" name="file_attachment" data-index={i} data-type="file_attachment" id="file_attachment" onChange={this.upload.bind(this)} /> 
           <p>{b[2]}</p> 
          </div> 
          <div><a href="#" onClick={this.updateList} data-type="file_attachment" data-index={i} data-delete="true" className="remove-icon">&times;</a></div> 
          <span className="uploaded-alert">{b[1]}</span> 
         </div> 
        </li> 
    ) 
    }.bind(this)); 

    return(
       <div className="form-group file-attachment-area"> 
        <ul className="add-files">{file_attachment}</ul> 
        <a onClick={this.updateList} data-type="file_attachment" className="text-right add-attachment">&#43;</a> 
       </div> 
    ); 
    } 

Mais quand je télécharge un document et upload fonction est appelée à ce moment-là, il prend toujours la valeur d'index 0 et maintient donc la mise à jour de l'élément dans la première position.

upload(evt, i) { 
    evt.preventDefault(); 
    console.log(evt.target); // Console log to check position 
    .... 
} 

En sélectionnant un élément de mon journal de la console imprime les suivantes:

<input type="file" name="file_attachment" data-index="0" data-type="file_attachment" id="file_attachment"> 

Ainsi, l'index de données est toujours 0

EDIT: code corrigé

<label htmlFor={"file_attachment" + [i]}><i className={b[4]}></i></label> 
<input type="file" name="file_attachment" data-index={i} data-type="file_attachment" id={"file_attachment" + [i]} onChange={this.upload.bind(this)} /> 

Answer 1

Une chose qui pourrait causer un pro blem pour vous est qu'il semble que vous définissez la valeur d'id de chaque élément à la même valeur, et les valeurs d'ID doivent être uniques.

(Vous avez indiqué que c'était la solution, de changer vos valeurs d'identité, de sorte que vous pouvez sélectionner comme la réponse, @ anonn023432.)