javascript - 从文件内容设置状态

Question

我正在尝试将状态变量设置为从文本文件读取的内容。

每当我尝试在 r.onload 匿名函数中设置状态变量时，都会收到 setState() 方法未定义的错误。

我猜这是因为 JavaScript 的词法作用域。

我尝试将“this”绑定(bind)到“that”变量，然后将其传递到r.onload匿名函数内并调用that.setState()，但是我仍然得到相同的结果。

如何执行我的 r.onload 匿名函数，并在读取文件内容后设置我的状态变量？

react 组件:

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

react 方法:

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 函数内重新声明，如果您的文件函数是单击事件，则也可能会重新声明它。因此，请尝试绑定(bind)您的文件和 r.onload 函数

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