Вызов функции после загрузки 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 использует ванильный тег <a> для ссылки на скачивание.Как только загрузка начата, она запускается в фоновом режиме, отдельно от документа.Невозможно определить, когда загрузка завершена.

Пропеллер onClick на компоненте CSVLink будет запущен до открытия диалогового окна загрузки.Вы по-прежнему можете использовать его для запуска событий, но не можете гарантировать, что пользователь успешно загрузил файл.

Нажатие на компонент CSVLink, похоже, по какой-то причине портит вывод консоли вашего браузера.Такое поведение может заставить вас думать, что реквизит onClick не будет работать, если вы тестируете его с ведением журнала консоли.

У вас есть два варианта действий:

1:Расширение компонента CSVLink

Вы можете заменить тег <a> более интеллектуальным компонентом загрузки, который может отслеживать загрузку.Кажется, вы могли бы достичь этого, только заменив метод render https://github.com/react-csv/react-csv/blob/master/src/components/Link.js.Этот подход может занять много времени разработчика.

2: полагаться на пользовательский ввод

Вы можете определить начало загрузки с помощью onClick.Затем вы можете сделать вывод, что загрузка завершена (или, по крайней мере, диалоговое окно загрузки было закрыто), когда пользователь снова взаимодействует с приложением.

Что вы должны сделать, зависит от того, чего вы пытаетесь достичь и какбольшой контроль над пользовательским интерфейсом.