react-input-files：尽管禁用了输入按钮，用户仍然可以上传文件

Posted 2023-03-23

【中文标题】react-input-files：尽管禁用了输入按钮，用户仍然可以上传文件

【英文标题】：react-input-files: Despite disabling input button, the user can still upload a file

【发布时间】：2021-05-10 15:36:29

【问题描述】：

我正在使用react-input-files，来实现样式文件输入b

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

用户选择文件后，我想禁用该按钮。我设法禁用了Button 组件。但是，输入本身仍然有效。 换句话说，即使按钮似乎已禁用，当用户单击它时，文件选择窗口也会打开，用户可以再次选择文件。

我想让按钮看起来被禁用并阻止用户再次上传文件。

【问题讨论】：

你能分享你的uploadVideo函数吗？

通过查看源代码，我认为没有办法禁用上传。所以，也许你可以尝试使用label。这样，您就可以直接控制文件 input 元素，也可以禁用它。

【参考方案1】：

您可以在 style 属性中添加一些 CSS，例如：

<InputFiles
  style= pointerEvents: this.state.userHasChosenAFile ? 'none' : 'all' 
  ...otherProps
/>