[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 TypeError: Невозможно прочитать свойство 'getCroppedCanvas' из неопределенного.

Я попытался использовать" 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; }}
/>