javascript - ant-d upload中如何为removeFile添加PopConfirm一个图片文件

标签 javascript reactjs forms upload antd

我正在使用 Ant-d Upload 通过本地系统上传文件,然后单击文件预览图像上的删除图标,图像文件将被删除。我想添加一个弹出确认,所以我尝试将确认添加为onRemovefunction 中的 promise ,但它不起作用。它在浏览器中显示警报。

 onGalleryFileRemove = (file)=>{
 return new Promise((resolve, reject) => {
  confirm({
    title: 'are you sure to remove this file?',
      onOk: () => {
        resolve(true)
      },
  })
    const index = this.state.galleryFile.indexOf(file);
    const deletedGalleryFiles = this.state.deletedGalleryFiles;
    deletedGalleryFiles.push(this.state.galleryFile[index].uid);
    const newFileList = this.state.galleryFile.slice();
        newFileList.splice(index, 1);
            this.setState({
                galleryFile:newFileList,
                deletedGalleryFiles,
                previewVisible:false 
            })
    false    
    })
}
<Upload
    listType="picture-card"
    beforeUpload={this.beforeFileUpload}
    fileList={this.state.galleryFile}
    onPreview={this.handlePreview}
    onChange={this.handleGalleryFileChange}
    onRemove={this.onGalleryFileRemove}
>
  {this.state.galleryFile.length >= 6 ? null : uploadGalleryButton}
</Upload>
<Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
  <img alt="previewImage" style={{ width: '100%' }} src={this.state.previewImage} />
</Modal>

最佳答案

幸运的是,我找到了解决方案。我知道有人可能会在这个庞大的社区中帮助我,我认为这对任何人都可能有用

 onGalleryFileRemove = (file)=>{
   const {confirm} = Modal
   return new Promise((resolve, reject) => {
    confirm({
      title: 'Are you sure you want to Delete ?',
      onOk: () => {
        resolve(true)
           <!---- onRemoveFunctionality here ---->
      },
      onCancel: () =>{
         reject(true)
      }
    })
   })
 }

关于javascript - ant-d upload中如何为removeFile添加PopConfirm一个图片文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57035890/

相关文章:

javascript - 如何实现语法高亮?

javascript - 循环 this.props.children 我如何测试他们的类型?

html - Textarea 屏幕其余部分的 100% 宽度

PHP - HTML 形成两种可能的操作?

javascript - 选择的 ng-options 不使用对象作为模型 [Angular 1.5]

javascript - extjs 提交从服务器到存储的答案

javascript - 如何在由支持 bean 管理的进度条上设置 JS 效果?

javascript - 在 Electron 应用程序中访问 USB 内存棒失败,错误代码为 : No device selected exception

reactjs - React 数据网格过滤器默认启用(并打开)

forms - Laravel 5.0 路由模型绑定(bind)在销毁操作中不起作用