我能否仅对antd上载组件中的某些文件隐藏删除图标

问题描述 投票:0回答:1

我想隐藏Antd上传组件中的删除按钮,仅适用于满足某些条件的文件。我知道可以使用showRemoveIcon属性为每个文件禁用删除图标。但是如何在fileList

中为单个文件执行此操作
javascript reactjs antd ant-design-pro
1个回答
0
投票

尝试一下:

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检查删除图标。

:它可以写得更好,只是一个提示,我不知道您的确切情况。

© www.soinside.com 2019 - 2024. All rights reserved.