无法通过键盘触发label元素关联的input事件

你的问题出在：label元素本身没有默认的键盘激活行为——虽然加了tabIndex={0}让它能被Tab键聚焦，但按下Enter或Space时，不会自动触发关联input的文件弹窗，而鼠标点击是浏览器原生支持的label关联逻辑。另外你用visibility: hidden+宽高0隐藏了input，也导致无法直接通过键盘访问到input本身。

下面给两种可行的解决办法：

方法一：给Label添加键盘事件监听 #

直接在label上监听键盘按键，当按下Enter或Space时，手动触发关联input的点击事件：

<>
  <label 
    className="button" 
    htmlFor="fileUploadInput" 
    tabIndex={0}
    onKeyDown={(e) => {
      // 监听Enter和Space键
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault(); // 避免Space键默认的页面滚动行为
        document.getElementById('fileUploadInput').click();
      }
    }}
  >
    Upload File
  </label>
  <input id="fileUploadInput" type="file" onChange={handleChange} />
</>

方法二：优化Input的隐藏样式 #

把input的隐藏方式改成视觉不可见但仍可被键盘访问的样式，这样用户可以Tab到input，按下Enter就能弹出文件浏览器，同时鼠标点击label的逻辑不受影响：

修改CSS：

input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none; /* 防止干扰label的点击交互 */
}

这种方式下，你甚至可以去掉label的tabIndex={0}，让用户直接Tab到input（虽然视觉不可见，但键盘能正常访问）。

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