Reactjs React cropper-cropBox不在图像中

我在当前项目中使用了最新的crapper.js react包，我只是迷路了。问题是，作物区域可能会超出图像范围，而这不应该超出图像范围。我已经尝试了我能想到的一切

这是一种_-crop方法，它在作物的每一次变化中都会被调用

componentDidMount = () => {
    sessionStorage.setItem('shouldMove', false)
  }

_crop = ( e ) => {
    var canvasData = document.getElementsByClassName('cropper-hidden') 
    [0].cropper.canvasData
    var cropBoxData = this.refs.cropper.getCropBoxData();

    if ( sessionStorage.getItem('shouldMove') === 'false' ) {
      sessionStorage.setItem( 'currentLeft', cropBoxData.left )
      sessionStorage.setItem( 'currentTop', cropBoxData.top )
      sessionStorage.setItem('shouldMove', true)
    }else {
      if (
        cropBoxData.left <= canvasData.left ||
        cropBoxData.top  <= canvasData.top  ||
        cropBoxData.left + cropBoxData.width > canvasData.width + 
        canvasData.left ||
        cropBoxData.top + cropBoxData.height > canvasData.height + 
        canvasData.top
      ) {
        cropBoxData.left = sessionStorage.getItem( 'currentLeft' )
        cropBoxData.top = sessionStorage.getItem( 'currentTop' )
      }
    }}

//render

    <Cropper
      ref='cropper'
      src={URL.createObjectURL(this.props.image)}
      aspectRatio={this.props.template.aspect_ratio}
      guides={true}
      zoomTo={ this.state.zoomValue }
      dragMode="move"
      crop={this._crop}
    />

componentDidMount=（）=>{
sessionStorage.setItem（'shouldMove'，false）
}
_作物=（e）=>{
var canvasData=document.getElementsByClassName（'craper-hidden'）
[0]。cropper.canvasData
var cropBoxData=this.refs.croper.getCropBoxData（）；
if（sessionStorage.getItem（'shouldMove'）='false'）{
sessionStorage.setItem（'currentLeft'，cropBoxData.left）
sessionStorage.setItem（'currentTop'，cropBoxData.top）
sessionStorage.setItem（'shouldMove'，true）
}否则{
如果(
cropBoxData.left canvasData.height+
canvasData.top
) {
cropBoxData.left=sessionStorage.getItem（'currentLeft'）
cropBoxData.top=sessionStorage.getItem（'currentTop'）
}
}}
//渲染

我知道这是会话存储的噩梦，但我不能使用状态，因为它会重置整个裁剪器。我还从image标记获取canvasData，因为crapper.canvasData（）函数在此包中不起作用

---

在我上面的代码中，react能够检测到作物区域在图像之外，但我不知道应该在那里做什么。我试图将裁剪区域的位置设置为图像外部的第一个位置。但数据并没有改变

哇。好吧，如果有人会为同样的问题而挣扎，答案很简单，但我真的在任何地方都找不到。 只需将viewMode设置为“2”，如下所示：

请阅读-总结是，这不是解决志愿者问题的理想方式，可能会对获得答案产生反作用。请不要将此添加到您的问题中。
<Cropper
      ref='cropper'
      src={this.props.image}
      aspectRatio={ar}
      guides={true}
      zoomTo={ this.state.zoomValue }
      dragMode="move"
      crop={this._crop}
      viewMode = {2} <-----
    />