evt.targetは常に入力リストの最初の入力を返します

Question

私はユーザーが複数の添付ファイルを添付できる反応ファイルアップローダーを持っています。ユーザが入力をクリックするたびに、data-indexを読んで入力の位置を確認します。

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> 
    ); 
    } 

しかし、私はドキュメントをアップロードし、upload機能は、それが常に0としてインデックス値をとり、したがって、第一の位置に要素を更新し続け、その時点で呼び出されたとき。

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

任意の要素を選択する上で、私のコンソールログには、次のように出力されます

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

だから、データ・インデックスは常に0

EDITです：修正されたコード

<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

プロを引き起こしているかもしれない1つのことあなたにとっては、各要素のid値を同じ値に設定しているように見え、ID値は一意でなければならないということです。

（あなたがanonn023432 @、答えとしてこれを選択することができるようにあなたは、自分のIDの値を変更するには、これは解決策であることを示した。）