ファイルの内容から状態を設定する

Question

状態変数をテキストファイルから読み込んだ内容に設定しようとしています。

私の状態変数をr.onload匿名関数内に設定しようとするたびに、setState（）メソッドが定義されていないというエラーが発生します。

私はJavaScriptの語彙的なスコープのために推測しています。

"this"を "that"変数にバインドし、それをr.onload anon関数の内部に渡してthat.setState（）を呼び出しましたが、同じ結果が得られます。

ファイルの内容を読み込んだら、r.onloadの無名関数を実行し、状態変数を設定するにはどうすればよいですか？

は、コンポーネントに反応：

<input type="file" onChange = {this.file} /> 

は法に反応：

file: function(evt) { 
    //Retrieve the first (and only!) File from the FileList object 
    var f = evt.target.files[0]; 

    if (f) { 
     var r = new FileReader(); 
     r.onload = function(e){ 
      var contents = e.target.result; 
      this.setState({ text: contents }); 
      alert(contents); 
     } 
     r.readAsText(f); 
     } else{ 
     alert("Failed to load file"); 
    } 
    } 

Answer 1

、それかもしれないthisがあなたのr.onload関数内で再宣言されますので、それはあるかもしれないし、あなたのファイル機能がクリックイベントである場合それも再宣言する。したがって、ファイルとr.onload関数の両方をバインドしてみてください。

file: function(evt) { 
    //... 
    r.onload = function() { 
    //... 
    }.bind(this) 
}.bind(this)