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

不应'数据索引= 0'不'数据 - 索引= “0”'？ – Red

可能会给您带来问题的一件事是，您似乎将每个元素的“id”值设置为相同的值，并且ID值必须是唯一的。 –

@RichardMauritz对不起，这是一个错字;我编辑了这个问题以纠正 – anonn023432

答

有一件事可能会导致专业人士对你来说，瑕疵是你似乎将每个元素的id值设置为相同的值，并且ID值必须是唯一的。

（您表示这是解决方案，改变你的ID值，这样你就可以选择这个作为回答，@ anonn023432。）

evt.target总是返回输入列表的第一个输入

相关推荐