如何将popconfirm从antd设计添加到文件删除操作

Question

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

我希望在用户每次尝试删除上传的文件时显示PopConfirm。 但是问题是：PopConfirm要求将React Element作为子级，而antd上载器似乎没有对此提供访问权限。

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

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

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

Answer 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>
  );
}

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