File类型Input的onChange方法触发其他同类型Input的onChange方法异常问题

嘿，我一眼就发现问题所在了——你两个文件输入框的ID重复了！

在HTML规范里，页面上每个元素的id属性必须是唯一的。但你这里两个<Input>组件的id都是file-input，对应的<label>的htmlFor也都指向这个值。浏览器在匹配label和input关联关系时，只会找到第一个拥有该ID的元素，所以你点击第二个label时，实际上触发的是第一个文件输入框的onChange事件，自然就执行了第一个函数。

修复方法很简单：给两个输入框设置唯一ID #

只需要把两个输入框的id改成不同的值，同时让对应的label的htmlFor匹配新ID就行，具体修改如下：

第一个图片输入区域（Front Image）

保持onChangeFrontImage函数逻辑不变，修改JSX部分：

<div className="box-1">
  <label htmlFor="file-input-front" >
    { previewFront ? <img src={previewFront} alt="icon" style={{ width: 50, height: 50 }} /> : <img src={Camera} alt="camera-icon" /> }
    <p>Framifrån</p>
  </label>
  <Input type="file" id="file-input-front" className='img-file' onChange={(e) => onChangeFrontImage(e)} />
</div>

第二个图片输入区域（Side Image）

先恢复你注释掉的onChangeSideImage逻辑，再修改JSX：

const onChangeSideImage = (e) => {
  if (e.target.files[0]) {
    console.log(e.target.files[0], 'console of side image')
    setSideImage(e.target.files[0])
    console.log("picture: ", e.target.files[0]);
    const sideReader = new FileReader();
    sideReader.addEventListener("load", () => {
      setPreviewSideImage(sideReader.result);
    });
    sideReader.readAsDataURL(e.target.files[0]);
  }
}

<div className="box-1">
  <label htmlFor="file-input-side" >
    { previewSideImage ? <img src={previewSideImage} alt="" style={{ width: 50, height: 50 }} /> : <img src={Camera} alt="camera-icon" /> }
    <p>Sida</p>
  </label>
  <Input type="file" id="file-input-side" className='img-file' onChange={(e) => onChangeSideImage(e)} />
</div>

这样修改后，每个label都会准确关联到对应的文件输入框，点击第二个输入区域时就会触发onChangeSideImage函数，两个输入框的操作就不会再混淆啦。

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