时间戳

首页 > 解决方案 > 在 react-csv 中下载 CSV 后调用函数

javascript - 在 react-csv 中下载 CSV 后调用函数

问题描述

我正在使用react-csv下载 CSV 文件。它正在根据需要工作。

但是，我想在下载 CSV 文件后调用另一个函数。这可能吗？

到目前为止，这就是我尝试这样做的方式：

{
    finalXerodata && 
    <CSVLink
        data={finalXerodata}
        onClick={() => { console.log("Clicked!"); //this doesnt work }}
        disabled={(finalXerodata.length < 1)}
        headers={xeroColumns}
        filename="data.csv"
        className="ant-btn ant-btn-primary"
        style={{marginLeft: '20px'}}>Download CSV               
    </CSVLink>
}

https://www.npmjs.com/package/react-csv

官方文档说 onClick 事件可用，但在这种情况下似乎不起作用。

谢谢

标签： javascriptreactjsonclick

解决方案

react-csv使用 vanilla<a>标签提供下载链接。下载开始后，它将在后台运行，与文档分开。无法检测下载何时完成。

组件上的onClick道具CSVLink将在打开下载对话框窗口之前运行。您仍然可以使用它来触发事件，但您无法确保用户成功下载了文件。

由于某种原因，单击某个CSVLink组件似乎会劫持浏览器的控制台输出。这种行为可能会让您误以为onClick如果您使用控制台日志记录该道具将无法正常工作。

关于如何继续，您有两种选择：

1：扩展CSVLink组件

您可以将<a>标记替换为可以跟踪下载的更智能的下载组件。看来您可以通过仅替换render方法https://github.com/react-csv/react-csv/blob/master/src/components/Link.js来实现这一点 。这种方法可能会占用大量开发人员的时间。

2：依赖用户输入

您可以使用 检测下载的开始onClick。然后，当用户再次与应用程序交互时，您可以推断下载已完成（或至少下载对话框已关闭）。

您应该做什么取决于您想要实现的目标以及您希望对用户体验进行多少控制。

推荐阅读