Reactjs function call error

Question

i am creating a React Component which renders a input file element, onChange of that element i am running a function called readFile function. Within the readFile function i am calling another function named _tsvJson. On this function call i am getting an error. i don't know what is wrong with this, please, somebody guide me

var HelloWorld = React.createClass({
      _tsvJson:function(input){
              var info = input.replace(/['"]/g,''),
                  lines = info.split('\n'),
                  firstLine = lines.shift().split('\t'),
                  json = [];

              var removeQuotes = function(string){
                  string = string.replace(/(['"])/g, "\\$1");
                  if (!isNaN(string)){
                      string = parseFloat(string);
                  }
                  return string;
              };

              $.each(lines, function(index, item){
                  var lineItem = item.split('\t'),
                      jsonLineEntry = {};

                  $.each(lineItem, function(index, item){
                      jsonLineEntry[firstLine[index]] = removeQuotes(item);
                  });
                  json.push(jsonLineEntry);

              });
              return json;
      },
      readFile:function(event){
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function(evt){
             var resultText = evt.target.result;
             var rowsReturned = resultText.split(/\r\n|\r|\n/).length;
             if(rowsReturned > 3){
                  var objects = this._tsvJson(resultText);
                  console.log(objects);
             }
        }
        var newFile = file.slice(0,5000);
        reader.readAsText(newFile);             
      },
    render:function(){
         return(
              <input type="file" onChange={this.readFile} />
         );
    }
});

ReactDOM.render(<HelloWorld />,document.getElementById('container'));

score 0 · Accepted Answer · answered May 05 '16 at 12:04

0

I suspect your problem is here:

reader.onload = function(evt){
     var resultText = evt.target.result;
     var rowsReturned = resultText.split(/\r\n|\r|\n/).length;
     if(rowsReturned > 3){
          var objects = this._tsvJson(resultText);
          console.log(objects);
     }
}

Inside the onload callback you have a different context, so trying to call this._tsvJson there won't work. You should be able to fix that by doing

reader.onload = function(evt) {
   ...
}.bind(this);

which will bind the callback function to the correct value of this.

answered May 05 '16 at 12:04

ivarni

17,658
17
76
92

There be more details about this here: http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback – ivarni May 05 '16 at 12:06
Thank you so much this works fine.but again i am getting an error like **Uncaught ReferenceError: $ is not defined** inside the tsvJSon function – yasar May 05 '16 at 12:10
@yasar I'm guessing you haven't included jquery on the page then – ivarni May 05 '16 at 12:12
You can replace `$.each(lines, function...` with `lines.forEach(function...` though. – ivarni May 05 '16 at 12:13
i didn't include it that's the problem.you are a genius – yasar May 05 '16 at 12:13

Reactjs function call error

1 Answers1