Могу ли я скрыть значок удаления только для некоторых файлов в компоненте AntD Upload - PullRequest
Новая
       27

Могу ли я скрыть значок удаления только для некоторых файлов в компоненте AntD Upload

0 голосов
/ 17 апреля 2020

Я хочу скрыть кнопку удаления в Antd Загружать компонент только для файлов, которые соответствуют определенным критериям. Я знаю, что значок удаления можно отключить для каждого файла, используя showRemoveIcon prop. Но как я могу сделать это для отдельного файла в fileList

1 Ответ

0 голосов
/ 21 апреля 2020

Попробуйте это: 

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, который вы имеете в виду.

Примечание : он может писать лучше, просто была подсказка, и я не знаю о вашем точном сценарии.

...