this.setState() 不是函数 Class React 的组件和带有 fileReader() 的图像

Question

我不明白为什么 this.setState 不起作用，如果我把它绑定在上面。我真的很感激能帮上忙。

class Register extends React.Component{
  constructor(props){
    super(props)

    this.state= {
      profilePic:"", 
    }

    this.Handleimage= this.Handleimage.bind(this);

  }

  Handleimage(e){
     var file = e.target.files[0]
    if(file) {
      const reader = new FileReader()
      reader.addEventListener("load", function() {
        this.setState({
          profilePic: this.result
        })
      })
      reader.readAsDataURL(file)
    } 
  }

 <input  type="file"  label="Foto de perfil" name='profilePic' onChange={(e)=> this.Handleimage(e)}/>

Answer 1

问题是函数有自己的 this。在您的实现中，this 似乎在 reader 的上下文中，而不是您的反应组件。

您可以改为使用 reader.onload 回调并从加载事件中读取。这适用于我从本地机器抓取图像文件并渲染它。

FileReader.onload

The FileReader.onload property contains an event handler executed when the load event is fired, when content read with readAsArrayBuffer, readAsBinaryString, readAsDataURL or readAsText is available.

Handleimage(e) {
  var file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (event) => {
      this.setState({ profilePic: event.target.result });
    };
    reader.readAsDataURL(file);
  }
}

this.setState() 不是函数 Class React 的组件和带有 fileReader() 的图像

this.setState() is not a function Class Component of React and image with fileReader()

class

this

setstate

reactjs