this.setState ist keine Funktion (versucht Upload Image) ReactJs

Question

Versuchen Sie, Upload-Funktion mit cropper Komponente zu erstellen. Aber wenn ich Zustand gesetzt versuchen heißt es, dass

Uncaught TypeError: this.setState is not a function at FileReader.reader.onload

Komponente

import React, { Component, PropTypes } from 'react' 
import { Link, browserHistory } from 'react-router' 
import { connect } from 'react-redux' 
import Cropper from 'react-cropper'; 

class HeadPortrait extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     image: '', 
    } 
    } 

    clickadd(e) { 
    document.getElementById('uploadfiles').click(); 
    } 

    loadFile(e) { 
    e.preventDefault(); 
    var reader = new FileReader(); 
    reader.onload = function() { 
     this.setState({ image: reader.result }) 
    }; 
    reader.readAsDataURL(e.target.files[0]); 
    ; 
    }; 

    _crop() { 
    // image in dataUrl 
    console.log(this.refs.cropper.getCroppedCanvas().toDataURL()); 
    } 

    render() { 
    return (
     <div className="group-content width415"> 
     <input id="uploadfiles" type="file" accept="image/*" onChange={this.loadFile.bind(this)}></input> 
     <a onClick={this.clickadd.bind(this)} className="gt-btn-small gt-left ">Add Image</a> 
     <div> 
      <div className="bigImageprev gt-left"><img width="300" height="300" id="output" /></div> 
     </div> 
     <div className="gt-clear"></div> 
     <div className="btnSaveImage gt-right"><a className="gt-btn-small" href="#">Save</a></div> 

     <Cropper 
      ref='cropper' 
      src={this.state.image} 
      style={{ height: 400, width: '100%' }} 
      // Cropper.js options 
      aspectRatio={16/9} 
      guides={false} 
      crop={this._crop.bind(this)} /> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    // stories: state.stories 
    } 
} 

export default connect(mapStateToProps)(HeadPortrait) 

Versuch tun wie in Beispiel https://github.com/roadmanfong/react-cropper/blob/master/example/src/Demo.jsx

Answer 1

Problem ist die function Sie verwenden für onload: this es nicht ist Ihre Klassen this. Versuchen Sie entweder einen Pfeil Funktion:

reader.onload =() => this.setState({ image: reader.result }) 

Oder zuweisen this einer Variablen vor

const scope = this 
reader.onload = function() { 
    scope.setState({ image: reader.result }) 
} 

Auch lohnt es sich, die Bindung der Event-Handler in den Konstruktor, anstatt direkt in machen, weil diese Weise werden Sie neu rendern Ihre Komponente egal, wie Ihre Zustandsänderungen - da die Event-Handler eine neue Referenz jedes Mal ist:

constructor(props) { 
    super(props) 
    this.state = { 
    image: '', 
    } 
    this.loadFile = this.loadFile.bind(this) // properly bound once 
} 

In render:

<input onChange={this.loadFile}></input> 

Answer 2

Die reader.onload Funktion muss this gebunden sein. Dann wird es auf dem Umfang this.setState haben.

var onloader = function(){this.setState({ image: reader.result }); reader.onload = onloader.bind(this);

Sie können einen Pfeil Funktion auch nur:

reader.onload =()=>{this.setState({ image: reader.result });