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

默认情况下您无法执行此操作，因为<?php require_once("conection.php"); $UserID = $_GET['GetID']; $query = "select * from user where User_ID='".$UserID."'"; $result = mysqli_query($con,$query); while ($row = mysqli_fetch_assoc($result)) { $UserID = $row['User_ID']; $UserName = $row['User_Name']; $UserAge = $row['User_Age']; $UserEmail = $row['User_Email']; } ?>道具是<form action="update.php" method="post"> <input type="text" class="form-control mb-2" placeholder=" User Name " name="name" value="<?php echo $UserName ?>"> <input type="text" class="form-control mb-2" placeholder=" User Age " name="age"value="<?php echo $UserAge ?>"> <input type="email" class="form-control mb-2" placeholder=" User Email " name="email"value="<?php echo $UserEmail ?>"> <button class="btn btn-primary" name="actualizar">Actualizar</button> </form>标签的filename属性，它是内置HTML。并在渲染时生成。

download

但是您可以使用React Refs来修改<a />标签的属性，这是一种破解方法。

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

我更改了<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方法将返回当前日期，以便您可以看到第二个更改。

Answer 2

您的getFileName在渲染过程中被调用，您需要在点击发生时调用它（即CSVLink的onCLick）方法。幸运的是，它们提供了一种编写异步onClick的方法。

首先，设置一个名为filename的状态：

state = {
  filename: ""
}

现在使用asyncOnClick = {true}将回调添加到CSVLink。应该在任何处理逻辑之前调用此函数。 See the docs。

在该onClick中，设置您的状态，并在完成后调用done()：

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

Answer 3

这是因为您使用了filename={this.getFileName()}，它在组件渲染后立即被调用。

由于您需要在CSVLink组件内处理的事件上生成文件名，因此必须在CSVLink组件内定义此功能。

另一种替代方法是使文件名prop接受filename={this.getFileName}之类的函数，并在CSVLink的onClick处理程序中使用this.props.filename属性，您可以将其更改为{{1 }}。

PS： this.props.filename()允许一个react-csv道具，该道具可以是异步的，因此您可以将文件名保留为状态变量，然后在{{ 1}}，然后再调用onClick。 https://www.npmjs.com/package/react-csv#--onclick-props

中详细介绍了该文档

在React中下载时如何在当前日期时间生成文件名

3 个答案: