如何将 antd design 中的 popconfirm 添加到文件删除操作中

【问题标题】：How to add popconfirm from antd design to file removal action如何将 antd design 中的 popconfirm 添加到文件删除操作中
【发布时间】：2019-07-16 07:08:14
【问题描述】：

我在我的 react 应用程序中使用 Antd Design 库。我有一个包含 File Upload

的表单

我想在用户每次尝试删除上传的文件时显示PopConfirm。但问题是：PopConfirm 需要 React Element 作为子元素，而 antd 上传器似乎没有提供对它的访问权限。

但是可能有其他解决方案吗？

我看过这个问题： How to add PopConfirm for removeFile an image file in ant-d upload

但是通过显示模态解决了问题。这不是我想要的。应用程序中的其他地方总是使用 PopConfirm，并且出于某种原因将在哪里使用模态。我真的希望有解决方案。

【问题讨论】：

标签： reactjs antd

【解决方案1】：

没有内置的方法可以实现这一点。

最干净的方法是使用Modal:

function App() {
  const [visible, setVisible] = useState(false);
  const toggle = () => setVisible(prev => !prev);
  return (
    <div>
      <Modal okText="Yes" cancelText="No" visible={visible} onCancel={toggle}>
        Are you sure delete this task?
      </Modal>
      <Upload {...props} onRemove={toggle}>
        <Button>
          <Icon type="upload" /> Click to Upload
        </Button>
      </Upload>
    </div>
  );
}

唯一的解决方案是使用antd 组件实现您自己的Upload，并在上传文件的组件上使用Popconfirm。

【讨论】：

好的。谢谢，我会尝试使用 Antd 实现自定义文件上传器。