gpt4 book ai didi

javascript - evt.target 始终返回输入列表的第一个输入

转载 作者:行者123 更新时间:2023-12-03 04:31:20 30 4
gpt4 key购买 nike

我有一个 react 文件 uploader ,它允许用户附加多个文件附件。每当用户单击输入时,我都会读取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)} />

最佳答案

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

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

关于javascript - evt.target 始终返回输入列表的第一个输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43475075/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com