我想隐藏Antd上传组件中的删除按钮,仅适用于满足某些条件的文件。我知道可以使用showRemoveIcon
属性为每个文件禁用删除图标。但是如何在fileList
尝试一下:
handleRemoveId = id => {
if(id === '-1') {
return null;
} else {
return (
<DeleteOutlined />
)
}
}
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">Upload</div>
</div>
);
<Upload
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
listType="picture-card"
onPreview={this.handlePreview}
onChange={this.handleChange}
>
<div>
{fileList.length && fileList.map(item => (
<div style={{ position: 'relative' }}>
<img src={item.url} alt="" height={80} />
<span style={{ position: "absolute", left: '50%', top: '50%', transform: 'translate(-50%,-50%)', color: '#fff' }}>
{this.handleRemoveId(item.uid)}
<EyeOutlined />
</span>
</div>
))}
{fileList.length < 8 ? uploadButton : null}
</div>
</Upload>
您应该自己处理所有删除和访问,并添加大量CSS,并通过您想要的相关uid检查删除图标。
注:它可以写得更好,只是一个提示,我不知道您的确切情况。