3
私はreactjsで反応クロッパーコンポーネントを使用しました。私はこの機能をポップアップで作った。ここでは、アップロードと呼ばれるボタンが1つあります。ボタンをクリックすると、ポップアップ画面が開きます。私はその作物エリアを持っています。作物やキャンセルのような2つのボタンもあります。私がクロップまたはキャンセルボタンのいずれかをクリックすると、私は再び同じイメージを開くことができません。この問題を解決するには？ここでReactJsで反応クロッパー法を破壊するには？
は、私のコードです
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;