javascript - 如何从文件列表中删除特定文件?
问题描述
我的目标是从文件列表中删除一个特定的文件,但是当我想删除最后一个文件而不是所需的文件时。
这是代码:
{this.state.myFiles.map(file => (
<p key={file.name}>
{file.name} ({file.size} bytes)
<button
className={"material-icons delete"}
onClick={() => this.handleRemoveFile(file.name)}
>
Remove file
</button>
</p>))}
从文件列表中删除特定文件:
handleRemoveFile = (fileName) => {
const myFiles = [...this.state.myFiles];
myFiles.splice(myFiles.indexOf(fileName), 1)
this.setState({ myFiles })
}
我无法删除特定文件,它正在从文件列表中删除最后一个文件,有人可以帮我从文件列表中删除特定文件吗?
谢谢!提前。
解决方案
map
给你第二个参数,它是数组的索引。
{this.state.myFiles.map((file,index) => (
<p key={file.name}>
{file.name} ({file.size} bytes)
<button
className={"material-icons delete"}
onClick={() => this.handleRemoveFile(index)}
>
Remove file
</button>
</p>))}
现在您可以使用此索引来过滤文件
handleRemoveFile = (fileIndexToRemove) => {
const updatedFiles = this.state.myFiles.filter((file, index) => index !== fileIndexToRemove)
this.setState({ myFiles: updatedFiles })
}
推荐阅读
- flutter - 酒店客人一次登录扑腾
- html - 从下到上填充 SVG 心形
- java - SpringBoot 用户缺少权限或找不到对象 HSQLDB
- cmake - 如何构建 libobs 作为 obs-studio-node 模块的依赖项?
- java - 如何修复无法从静态上下文中引用的非静态变量
- azure-functions - Azure 函数的 CosmosDB 触发器
- react-native - react-native-view-shot:NativeModules.RNViewShot 未定义。确保库在本机端链接
- c++ - 使用 `std::accumulate` 和 constexpr
- azure - 需要创建 ARM 模板以在 Azure 应用服务中启用自动修复,并根据 HTTP 状态代码范围 (400-530) 自定义自动修复
- python - 如何在python中调用多个基类__init__