reader.onload函数是否具有事件触发器?

时间:2018-07-30 07:27:24

标签: javascript reactjs file events reader

我已经破解了大约6个小时,但仍然找不到解决方案。我想用ReactFileReader和DataParser读取一个csv文件。问题是“ reader.onload”输入了该函数,但是随后以某种方式我试图从“数据”复制到“ this.state.data”的数据无法正确复制。使用一些适当的控制台日志,我会得到“数据”在执行时未定义或为空。

此功能是否正常工作?或者,为什么这不能按预期工作?

这是我一直在学习的班级代码:

import React from 'react';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import DataParser from './DataParser.jsx';
import ReactFileReader from 'react-file-reader';

class FromFileButton extends React.Component{
    constructor(props){
            super(props);
    }

    state = {
            data: null
    }

    setState = (value) => 
    {
            this.state.data=value;
    };

    handleFiles = (files) => {
            let tempData;
            var reader = new FileReader();
            reader.onload = function(e) {
                    let data;
                    // Use reader.result
                    //alert(reader.result)
                    data = DataParser.loadDataFromFile(reader.result);
                    this.state.data = data;
                    console.log(this.state.data);
            }
            reader.readAsText(files[0]);
    }
    render(){
            return(
                    <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
                            <Button size="small" color="secondary" variant="outlined" 
                                    onClick={() => {this.props.myData(this.state)}}>
                                    Search CSV file</Button>
                    </ReactFileReader>

            )
    }

}

FromFileButton.propTypes = {  
        classes: PropTypes.object.isRequired,
        myData: PropTypes.func
};
export default FromFileButton;

谢谢。

0 个答案:

没有答案