Wie kann man die React-Cropper-Methode in ReactJs zerstören?

Question

Ich habe React-Cropper-Komponente in reactjs verwendet. Ich habe diese Funktionalität auf Popup gemacht. Hier habe ich einen Button namens Upload. Wenn ich auf die Schaltfläche klicke, öffnet sich der Popup-Bildschirm. Dort habe ich diese Erntefläche. Dort haben auch die beiden Knöpfe wie crop und cancel. Wenn ich auf "Beschneiden" oder "Abbrechen" klicke, kann ich das gleiche Bild nicht mehr öffnen. Wie behebe ich dieses Problem? Hier

ist mein Code,

var React = require('react') 
var Cropper = require('react-cropper').default; 

var CropImg = React.createClass({ 
    getInitialState:function(){ 
     return { 
      open:false, 
      src:"", 
      cropResult: null, 
     } 
    }, 
    onChange:function(e){ 
     var files, self = this; 
     if (e.dataTransfer) { 
      files = e.dataTransfer.files; 
     } else if (e.target) { 
      files = e.target.files; 
     } 
     var reader = new FileReader(); 
     reader.onload = function(){ 
      self.setState({ 
       open:true, 
       src: reader.result 
      }); 
     }; 
     reader.readAsDataURL(files[0]); 
    }, 
    cropImage:function(){ 
     if (typeof this.refs.cropper.getCroppedCanvas() === 'undefined') { 
      return; 
     } 
     this.setState({ 
      open:false, 
      src:"", 
      cropResult: this.refs.cropper.getCroppedCanvas().toDataURL(), 
     }); 
    }, 
    cancelCrop: function() { 
     this.setState({ 
      open:false, 
      src:"", 
      cropResult:null 
     }); 
    }, 
    render:function(){ 
     return (
      <div> 
       <div className="scroll-content"> 
        <input type="file" id="photo" onChange={this.onChange} /> 
       </div> 
       <div className={"profile-popup "+(this.state.open ? "active" : "inactive")}> 
        <div className="crop-area"> 
         <Cropper 
          style={{ height: 280, width: '100%' }} 
          aspectRatio={1/1} 
          guides={true} 
          src={this.state.src} 
          ref="cropper" /> 
         <div className="row-col"> 
          <div className="col"><button onClick={this.cropImage}>Crop</button></div> 
          <div className="col"><button onClick={this.cancelCrop}>Cancel</button></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
}); 

module.exports = CropImg; 

Answer 1

this verbindlich.

this.cropImage.bind(this)