Как реализовать и отобразить CSV-файл на веб-странице Reactjs - PullRequest
0 голосов
/ 19 июня 2020

В настоящее время у меня есть система для загрузки файла CSV на страницу реакции, и она отображает его в консоли. Как мне отобразить его на реальной веб-странице?

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

"use strict";
import React from 'react';
import Papa from 'papaparse';

const DataDisplayed = ({}) => (
    <p>test</p>
)

class Dispatcher extends React.Component {
  constructor() {
    super();
    this.state = {
      csvfile: undefined,
      dataDisplayed: null
    };
    this.updateData = this.updateData.bind(this);
  }

  handleChange = event => {
    this.setState({
      csvfile: event.target.files[0]
    });
  };

  importCSV = () => {
    const { csvfile, order } = this.state;
    Papa.parse(csvfile, {
      complete: this.updateData,
      header: true
    });
    this.setState({order: csvfile})
    console.log(order)

  };

  updateData(result) {
    var data = result.data;
    console.log(data);

    return (
        <div>hello</div>
    )

  }

  render() {
    console.log("Render File data: ",this.state.csvfile);
    return (
      <div className="App">
        <h2>Import Schedule</h2>
        <input
          className="csv-input"
          type="file"
          ref={input => {
            this.filesInput = input;
          }}
          name="file"
          placeholder={null}
          onChange={this.handleChange}
        />
        <p />

        <button onClick={this.importCSV}> Import now!</button>
        <DataDisplayed></DataDisplayed>
      </div>
    );
  }
}

export default Dispatcher;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...