Javascript 如何在ReactJs中销毁react-cropper方法？

我在reactjs中使用了react裁剪器组件。我在弹出窗口上创建了这个功能。在这里，我有一个按钮叫上传。如果我点击按钮，弹出屏幕将打开。我有那片庄稼地。还有两个按钮，如裁剪和取消。如果单击“裁剪”或“取消”按钮，则无法再次打开同一图像。如何解决这个问题

这是我的密码

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;

var React=require（'React'））
var croper=require（'react-croper'）。默认值；
var CropImg=React.createClass({
getInitialState:函数（）{
返回{
开：错，
src:“，
croppresult:null，
}
},
onChange：函数（e）{
var文件，self=this；
如果（如数据传输）{
files=e.dataTransfer.files；
}否则，如果（如目标）{
files=e.target.files；
}
var reader=new FileReader（）；
reader.onload=函数（）{
自我状态({
开放：是的，
src:reader.result
});
};
reader.readAsDataURL（文件[0]）；
},
cropImage:function（）{
if（this.refs.crapper.getCroppedCanvas（）的类型='undefined'）{
返回；
}
这是我的国家({
开：错，
src:“，
CropPresult:this.refs.croper.getCroppedCanvas（）.toDataURL（），
});
},
取消裁剪：函数（）{
这是我的国家({
开：错，
src:“，
croppreslt:null
});
},
render:function（）{
返回(
收成
取消
);
}
});
module.exports=CropImg；

此绑定

this.cropImage.bind(this)