В настоящее время у меня есть система для загрузки файла 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;