如何在上传文件数量超过1个时禁用file input输入框

你现有代码的逻辑已经基本符合需求，只需要补充少量细节即可生效，具体调整如下： #

1 必要初始化配置 #

首先需要在组件state中初始化files为空数组，否则首次渲染时读取this.state.files.length会抛出undefined报错：

state = {
  // 其他state项...
  files: []
}

2 上传逻辑保持即可 #

你写的fileChange方法逻辑正确，会把每次选择的文件合并到已上传文件列表中：

fileChange = (e) => {
  const files = e.target.files;
  const filesArr = Array.prototype.slice.call(files);
  this.setState({ files: [...this.state.files, ...filesArr] });
}

3 输入框禁用绑定逻辑正确 #

你写的disabled属性绑定逻辑已经满足「文件数量超过1个时禁用」的需求，当this.state.files.length大于1时输入框会自动置为不可用状态：

<input
  id="fileUpload"
  type="file"
  onChange={this.fileChange}
  accept="image/*"
  multiple
  disabled={this.state.files.length > 1}
/>

补充说明 #

• 你原代码中input的id拼写有误，可根据需求修正为fileUpload
• 如果后续需要支持删除已上传文件的功能，只需要在删除逻辑中把对应文件从this.state.files数组中移除即可，当数组长度回到≤1时，输入框会自动恢复可用状态。

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