React18循环渲染Input组件时onChange事件为何仅返回0索引值？

所有循环渲染的文件上传Input被设置了相同的固定id change-image-file，浏览器对同id的DOM元素只会识别第一个匹配节点，无论点击哪个上传按钮，触发事件时绑定的闭包索引永远是第一个Input对应的0值，因此回调拿到的index始终为0，该问题不影响e.target正常获取选中的文件值。

• 给每个Input拼接索引生成唯一id，避免id重复
• 修正代码里的拼写错误：conole 改为标准的console
• 循环渲染的Grid列表项补充key属性，符合React列表渲染规范

修复后代码：

{images.map((x, i) => (
    <Grid item key={i}>
           <Input
              accept="image/*"
              id={`change-image-file-${i}`} // 拼接索引保证每个Input id全局唯一
              required
              type="file"
              onChange={(e) => handleImageChange(e, i)}
           />
    </Grid>
)}

const handleImageChange = (e, index) =>{
       console.log(index)   // 现在可以正确获取对应上传项的索引
       console.log(e.target.files[0])
}

注意：如果后续给上传按钮搭配了Label组件，需要把Label的htmlFor属性值和对应Input的id保持一致，否则点击Label无法触发对应上传框的文件选择弹窗。

内容的提问来源于stack exchange，提问作者Masudalimran