Terima kasih atas jawaban di atas, saya pikir ruang lingkup (jawaban) selesai tetapi saya ingin menambahkan "cara bereaksi" untuk siapa pun yang menggunakan reaksi.
Buat file bernama importData.js:
import React, {Component} from 'react';
import XLSX from 'xlsx';
export default class ImportData extends Component{
constructor(props){
super(props);
this.state={
excelData:{}
}
}
excelToJson(reader){
var fileData = reader.result;
var wb = XLSX.read(fileData, {type : 'binary'});
var data = {};
wb.SheetNames.forEach(function(sheetName){
var rowObj =XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
var rowString = JSON.stringify(rowObj);
data[sheetName] = rowString;
});
this.setState({excelData: data});
}
loadFileXLSX(event){
var input = event.target;
var reader = new FileReader();
reader.onload = this.excelToJson.bind(this,reader);
reader.readAsBinaryString(input.files[0]);
}
render(){
return (
<input type="file" onChange={this.loadFileXLSX.bind(this)}/>
);
}
}
Kemudian Anda dapat menggunakan komponen dalam metode render seperti:
import ImportData from './importData.js';
import React, {Component} from 'react';
class ParentComponent extends Component{
render(){
return (<importData/>);
}
}
<ImportData/>
akan mengatur data ke statusnya sendiri, Anda dapat mengakses data Excel di "komponen induk" dengan mengikuti ini :