Question

我正在使用“输入类型=文件多个”，并且我确实列出了选择的文件，并带有从列表中删除选定文件的选项。我遇到的问题是我无法添加最后一个我删除了。假设您想添加已删除的最后一个文件（由于错误，您已经删除了该文件而必须添加），那么我不能这样做，我不能添加该文件

 handleFile = e  => {
    let file = e.target.files   
    for(let i = 0,f; f = file[i]; i ++){
          this.list.push(`${f.name } (${f.size})`)
          this.setState({fileArray: [ ...this.list]})
    }
}
handleRemoveFile = e => {
    this.setState({fileArray: this.state.fileArray.filter(f => {
         return f !== e
        })
    })
     this.list = this.list.filter(f => {
        return f !== e
      })
}

// in render I have
<input id="file-upload" type="file" multiple onChange={this.handleFile}/>
<div>
{this.state.fileArray != undefined&& this.state.fileArray.length>0 ?      
  this.state.fileArray.map((f,index) => {
        return 
    <div style={{display: 'flex'}} key={index}>
           <p> { `${f}`} </p>
           <i className={`fa fa-check ${s.check}`}></i>
      <span onClick={()=>this.handleRemoveFile(f)} 
            style={{marginLeft:'1%'}}>
         <i className={`fa fa-trash-alt ${s.trash}`}></i>
      </span>
    </div>
}) : ''}

Answer 1

我不太了解您说的是什么，但是我相信您在单击Remove之后在过滤文件（隐藏文件）时遇到了一些问题，对吧？

问题是您正在过滤比较对象：

this.setState({
  fileArray: this.state.fileArray.filter(f => {
    return f !== e
  })
})

比较f和e是一个坏主意，主要是在代码的这一部分：

this.list = this.list.filter(f => {
  return f !== e
})

因为e对象是this.state.fileArray的一部分，所以e中没有list。

我建议2种方法：

一种好方法：检查f和e是否具有可用于比较的唯一属性。例如：f.id !== e.id或f.fileName !== e.fileName
丑陋：发送file而不是将handleRemove对象发送到index函数。因此，您应该执行<span onClick={()=>this.handleRemoveFile(index)}，然后：

handleRemoveFile = index => {
    this.setState({fileArray: this.state.fileArray.filter((f, i) => {
         return f=index !== i
        })
    })
     this.list = this.list.filter((f, i) => {
        return index !== i
      })
}

添加从阵列中删除的最后一个项目

1 个答案: