如何使用reactjs将导入的csv数据显示到表中? [英] How to show the imported csv data into a table using reactjs?

问题描述

我有一个上传按钮，仅将CSV文件导入到我的Reactjs应用程序中.我可以使用React文件阅读器成功上传数据(CSV)，但现在我想将CSV数据显示到表格中.我认为这可以帮助我，但我不明白如何使用它 https://github.com/marudhupandiyang/react-csv-to-table 此处.下面是我的代码:

I have an upload button to import only CSV files to my Reactjs application. I can successfully upload the data(CSV) using React file reader but now I want to show the CSV data it into a table. I think this could help me but I cannot understand how to use it https://github.com/marudhupandiyang/react-csv-to-table here. Below is my code:

import React, { Component } from 'react';
import ReactFileReader from 'react-file-reader';
import { CsvToHtmlTable } from 'react-csv-to-table';
import './App.css';

class App extends Component {

 constructor(props){
  super(props);
  this.state = {
    csvData: ''
  };
}

handleFiles = files => {
     var reader = new FileReader();
     reader.onload = function(e) {
     // Use reader.result
       this.setState({
         csvData: reader.result
       })
     }
   reader.readAsText(files[0]);
}

render() {
return (
    <div>
         <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
                 <button className='btn'>Upload</button>
          </ReactFileReader>
          <CsvToHtmlTable
               data={this.state.csvData}
               csvDelimiter=","
               tableClassName="table table-striped table-hover"
           />
   </div>

    );
  }
}

export default App;

请帮助.对我来说很重要.

please help. It's very important to me.

推荐答案

您几乎明白了.在函数内部使用setState时要小心.该引用将重新绑定到功能范围.改用它

You almost got it. Be careful when using setState inside a function. This reference will be re-binded to the function scope. Use this instead

 handleFiles = files => {
    let reader = new FileReader();
    reader.onload = () => {
      // Use reader.result
      this.setState({
        csvData: reader.result
      })
    }
    reader.readAsText(files[0]);
  }

您可以在这里进行测试. https://codesandbox.io/s/qlj338vnkj

You can test it here. https://codesandbox.io/s/qlj338vnkj

这篇关于如何使用reactjs将导入的csv数据显示到表中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！