evt.target總是返回輸入列表的第一個輸入

我有一個反應文件上傳器，它允許用戶附加多個文件附件。每當用戶點擊輸入時，我都會讀data-index來檢查輸入的位置。evt.target總是返回輸入列表的第一個輸入

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

編輯：更正代碼

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

來源

2017-04-18 anonn023432

不應'數據索引= 0'不'數據 - 索引= 「0」'？ – Red

可能會給您帶來問題的一件事是，您似乎將每個元素的「id」值設置爲相同的值，並且ID值必須是唯一的。 –

@RichardMauritz對不起，這是一個錯字;我編輯了這個問題以糾正 – anonn023432

有一件事可能會導致專業人士對你來說，瑕疵是你似乎將每個元素的id值設置爲相同的值，並且ID值必須是唯一的。

（您表示這是解決方案，改變你的ID值，這樣你就可以選擇這個作爲回答，@ anonn023432。）

來源

2017-04-18 16:24:32

evt.target總是返回輸入列表的第一個輸入

回答

相關問題