Как сгенерировать имя файла на текущую дату и время при загрузке в реакции

Question

Я пытаюсь сгенерировать имя файла, используя текущую дату и время, используя следующий код:

getFileName() {
    let d = new Date();
    let dformat = [this.padLeft(d.getMonth() + 1),
    this.padLeft(d.getDate()),
    d.getFullYear()].join('') +
      '_' +
      [this.padLeft(d.getHours()),
      this.padLeft(d.getMinutes()),
      this.padLeft(d.getSeconds())].join('');

    console.log("getCurrentDate : ", dformat);
    return "GridWidget_" + dformat + ".csv";
  }

    render() {
return(
    <CSVLink data={data} filename={this.getFileName()} className="btn btn-primary" target="_blank">Export To CSV</CSVLink>);
    }

Проблема с приведенным выше кодом, как будто имя файла не создается с датой и временем при загрузке файла, новремя загружается, пока страница загружается.Я хочу, чтобы имя файла генерировалось только тогда, когда пользователь нажимает кнопку загрузки.

Я знаю, что это не имеет большого значения во времени, но требование похоже на то, что оно должно генерироваться с фактическим временем даты.Не в состоянии понять, почему это происходит.

Answer 1

Ваше getFileName вызывается во время рендеринга, вам нужно вызывать его, когда происходит щелчок (т. Е. Метод CSVLink onCLick).К счастью, они предоставляют способ написать асинхронный вызов на клике.

Сначала установите состояние с именем filename:

state = {
  filename: ""
}

Теперь добавьте обратный вызов в CSVLink с помощью asyncOnClick = {true}.Предполагается, что эта функция вызывается перед любой логикой обработки. См. Документы .

В этом onClick установите свое состояние и по окончании вызовите done():

<CSVLink
  data={data}
  asyncOnClick={true}
  filename={this.state.filename}
  onClick={(event, done) => {
    this.setState({
      filename: this.getFileName()
    }, () => {
      done()
    })
  }}
>
  Download me
</CSVLink>;

Answer 2

По умолчанию вы не можете этого сделать, потому что filename props - это атрибут download тега <a />, который является встроенным HTML.и генерируется при рендеринге.

<a download="10-36-45.csv" target="_blank" href="">Export To CSV</a>

Но есть способ взлома, который вы можете сделать, используя React Refs для изменения атрибута тега <a>.

export default class extends Component {
  $CSVLink = React.createRef();

  getFileName() {
    let d = new Date();
    let dformat = `${d.getHours()}-${d.getMinutes()}-${d.getSeconds()}`;

    console.log("getCurrentDate : ", dformat);
    return "GridWidget_" + dformat + ".csv";
  }

  render() {
    const data = [
      { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
      { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
      { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
    ];
    return (
      <CSVLink
        onClick={() => {
          this.$CSVLink.current.link.download = this.getFileName();
        }}
        ref={this.$CSVLink}
        data={data}
        filename={this.getFileName()}
        className="btn btn-primary"
        target="_blank"
      >
        Export To CSV
      </CSVLink>
    );
  }
}

Я изменяю метод getFileName, так как у меня нет информации о this.padLeft, метод getFileName вернет текущую дату, чтобы вы могли увидеть вторые изменения.

Answer 3

Это потому, что вы использовали filename={this.getFileName()}, который вызывается при визуализации компонента.

Поскольку вам необходимо сгенерировать имя файла для события, которое обрабатывается внутри компонента CSVLink, у вас будетчтобы определить эту функцию внутри компонента CSVLink.

Другой альтернативой было бы сделать так, чтобы имя файла prop принимало функцию, подобную filename={this.getFileName}, и внутри обработчика onClick CSVLink, где он использует свойство this.props.filename, которое вы можетеизмените его на this.props.filename().

PS: react-csv разрешает onClick проп, который может быть асинхронным, так что вы можете сохранить имя файла в качестве переменной состояния и затем вызвать setState вonClickHandler перед вызовом done().Документация подробно здесь https://www.npmjs.com/package/react-csv#--onclick-props