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

【问题标题】：evt.target always returns the first input of the input listevt.target 总是返回输入列表的第一个输入
【发布时间】：2017-04-18 14:32:42
【问题描述】：

我有一个 react 文件上传器，它允许用户附加多个文件附件。每当用户点击输入时，我都会读取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

编辑：更正的代码

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

【问题讨论】：

不应该是data-index=0 而不是data-index="0"？
可能会给您带来问题的一件事是，您似乎将每个元素的 id 值设置为相同的值，并且 ID 值必须是唯一的。
@RichardMauritz 抱歉打错了；我编辑了问题以纠正该问题
@KenH。你说的对;这就是问题所在。我没有意识到，因为我现在使用标签作为输入，所以我必须为每个标签提供唯一的 id；在我目前的情况下，它每次都使用相同的标签，这就是为什么我的视图没有正确呈现
@KenH。您可以添加您的评论作为答案吗？所以我能接受吗？这样，如果其他人有类似的问题，他们会找到你的答案:)

标签： javascript jquery reactjs attachment

【解决方案1】：

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

（您表示这是更改 ID 值的解决方案，因此您可以选择此作为答案，@anonn023432。）

【讨论】：