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

Question

我正在使用 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 事件可用，但在这种情况下似乎不起作用。

谢谢

Answer 1

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

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

点击 CSVLink组件似乎出于某种原因劫持了浏览器的控制台输出。这种行为可能会让您误以为 onClick如果您使用控制台日志记录测试它，prop 将不起作用。

关于如何继续，您有两个选择:

1:扩展CSVLink组件

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

2:依赖用户输入

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

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