使用react-input-files时，禁用按钮仍可触发文件上传如何解决？

react-input-files的实现机制是把原生文件选择输入框（<input type="file">）做了层叠置顶处理，盖在你传入的自定义子元素上面，所有和文件选择相关的点击、拖拽交互都由这个隐藏的原生输入框接收。
你现在只给内部嵌套的Button加了disabled，只会让按钮的视觉变成禁用态——因为实际的点击触发目标是盖在按钮上层的原生输入框，根本碰不到Button的禁用逻辑，所以哪怕按钮看起来是灰的，点上去照样会弹出文件选择窗口。

• 方案一：直接透传禁用属性
  这个库会把所有它自己没用到的props，原封不动传给内部的原生<input>元素，你只需要把和按钮一致的禁用状态直接绑在InputFiles组件上就行：

  <InputFiles
    accept="video/*"
    onChange={this.uploadVideo}
    disabled={this.state.userHasChosenAFile}
  >
    <Button
      className="btn-round"
      color="default"
      outline
      disabled={this.state.userHasChosenAFile}
    >
      Styled input button
    </Button>
  </InputFiles>
  

  这种方式下，透传的disabled会直接作用在那个置顶的隐藏输入框上。原生输入框一旦加上disabled属性，会完全屏蔽点击、键盘唤起、文件拖拽等所有能打开文件选择窗口的行为，从根源上堵死重复选择的路径。
• 方案二：旧版本兼容兜底
  如果你用的库版本比较老，没做好prop透传，传disabled不生效，可以用CSS做兜底拦截：当禁用状态触发时，给包裹InputFiles的容器加上pointer-events: none样式，让浏览器直接忽略这块区域的所有鼠标交互，从层叠层面阻断点击触发。

关键提醒：只靠内部Button的disabled是拦不住的，因为置顶的隐藏输入框才是真正的交互触发点，Button的禁用状态对它完全没有约束力。

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