javascript - 如何在点击时安装组件？

Question

我正在使用这个react-csv ，并且仅在安装时才触发下载。问题是我有一个普通的 Material 按钮，我需要在单击该按钮时触发该按钮:

<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 已经完成了您正在尝试的操作，但它不是 Material 按钮 (MButton):

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