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控制台会向我显示错误：未捕获的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; }}
/>

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

1 个答案: