Question

我正在使用此react-csv，它仅在安装后才触发下载。问题是我有一个普通的材质按钮，单击该按钮时需要触发它：

<MButton id="csv-download" onClick={<CSVDownload data={this.state.rowData} filename={"relatorio.csv"} target="csv-download"/>} style={{
    ...buttons.action,
    ...buttons.topRight
}}>Exportar</MButton>

onClick内的组件听起来很荒谬，但我将其放在此处说明了我的观点。我该怎么办？

Answer 1

我没有测试过，但是过去我做过这样的事情：

downloadCSV() {
  this.setState({
    downloadCSV: true
  })
}

renderCSVDownload() {
  if(this.state.downloadCSV) {
    return (
      <CSVDownload 
        data={this.state.rowData} 
        filename={"relatorio.csv"} 
        target="csv-download"/>
    )
  }
}

render() {
  return (
    <div>
      <MButton id="csv-download" onClick={this.downloadCSV} style={{
          ...buttons.action,
          ...buttons.topRight
      }}>Exportar</MButton>
      {this.renderCSVDownload()}
    </div>
  )
}

虽然CSVLink已经完成您要尝试的操作，但它不是“实质”按钮（MButton）：

<CSVLink
  data={this.state.rowData} 
  filename={"relatorio.csv"} 
  target="csv-download"
>Exportar</CSVLink>

如何在点击时安装组件？

1 个答案: