[React Cropper]：无法读取未定义的属性“”getCroppedCanvas“”

Question

我使用的是"React Cropper“(https://www.npmjs.com/package/react-cropper)库。

我有以下代码(和许多示例一样)：

import React from 'react';
import Cropper from 'react-cropper';

export default class PublishPhoto extends React.Component {
constructor(props) {
    super(props);
    this.state = 
    {
        src: '',
        cropResult: null,
    };
    this.onChangeImage = this.onChangeImage.bind(this);
    this.cropImage = this.cropImage.bind(this);
}

onChangeImage(e)
{
    e.preventDefault();
    let files;
    if (e.dataTransfer) {
      files = e.dataTransfer.files;
    } else if (e.target) {
      files = e.target.files;
    }
    const reader = new FileReader();
    reader.onload = () => {
      this.setState({ src: reader.result });
    };
    reader.readAsDataURL(files[0]);
}

cropImage() 
{
    if (typeof this.cropper.getCroppedCanvas() === 'undefined') {
      return;
    }
    this.setState({
      cropResult: this.cropper.getCroppedCanvas().toDataURL(),
    });
}

render(){
  return(
        <div>
            <div>Seccion de publicar foto</div>

            <input type="file" id="uploadImage" name="uploadImage" onChange={this.onChangeImage} />

            <Cropper
                style={{ height: 400, width: '100%' }}
                //aspectRatio={16 / 9}
                preview=".img-preview"
                guides={false}
                src={this.state.src}
                 />

                <button onClick={this.cropImage} style={{ float: 'right' }}>
                    Cortar imagen
                </button>


        </div>

    );  
}
}

但是当点击"Cortar imagen“时，javascript控制台会显示错误: Uncaught : Cannot read property 'getCroppedCanvas‘of undefined。

我尝试使用"this.refs.cropper.getCroppedCanvas()“代替"this.cropper.getCroppedCanvas()”，但"this.refs“是一个空对象。

谢谢:/

Answer 1

自我反应。

组件反应中缺少引用；如：

<Cropper
style={{ height: 400, width: '100%' }}
preview=".img-preview"
guides={false}
src={this.state.src}
ref={cropper => { this.cropper = cropper; }}
/>