javascript - [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: 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; }}
/>