Question

尝试使用裁剪器组件创建上传功能。但是，当我尝试设置状态时，它会说

未捕获的TypeError：this.setState不是FileReader.reader.onload中的函数

组件

import React, { Component, PropTypes } from 'react'
import { Link, browserHistory } from 'react-router'
import { connect } from 'react-redux'
import Cropper from 'react-cropper';

class HeadPortrait extends Component {
  constructor(props) {
    super(props)
    this.state = {
      image: '',
    }
  }

  clickadd(e) {
    document.getElementById('uploadfiles').click();
  }

  loadFile(e) {
    e.preventDefault();
    var reader = new FileReader();
    reader.onload = function () {
      this.setState({ image: reader.result })
    };
    reader.readAsDataURL(e.target.files[0]);
    ;
  };

  _crop() {
    // image in dataUrl
    console.log(this.refs.cropper.getCroppedCanvas().toDataURL());
  }

  render() {
    return (
      <div className="group-content width415">
        <input id="uploadfiles" type="file" accept="image/*" onChange={this.loadFile.bind(this)}></input>
        <a onClick={this.clickadd.bind(this)} className="gt-btn-small gt-left ">Add Image</a>
        <div>
          <div className="bigImageprev gt-left"><img width="300" height="300" id="output" /></div>
        </div>
        <div className="gt-clear"></div>
        <div className="btnSaveImage gt-right"><a className="gt-btn-small" href="#">Save</a></div>

        <Cropper
          ref='cropper'
          src={this.state.image}
          style={{ height: 400, width: '100%' }}
          // Cropper.js options
          aspectRatio={16 / 9}
          guides={false}
          crop={this._crop.bind(this)} />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    // stories: state.stories
  }
}

export default connect(mapStateToProps)(HeadPortrait)

尝试在示例中https://github.com/roadmanfong/react-cropper/blob/master/example/src/Demo.jsx

Answer 1

问题是您function使用的onload：this没有您的课程this。尝试使用箭头功能：

reader.onload = () => this.setState({ image: reader.result })

或者在{/ p>之前将this分配给变量

const scope = this
reader.onload = function () {
  scope.setState({ image: reader.result })
}

同样值得在构造函数中绑定事件处理程序而不是直接在render中绑定，因为无论状态如何变化，这都会重新渲染组件 - 因为事件处理程序每次都是一个新的引用：

constructor(props) {
  super(props)
  this.state = {
    image: '',
  } 
  this.loadFile = this.loadFile.bind(this) // properly bound once
}

在渲染中：

<input onChange={this.loadFile}></input>

Answer 2

reader.onload函数需要绑定到this。然后它将在范围上有this.setState。

var onloader = function(){this.setState({ image: reader.result }); reader.onload = onloader.bind(this);

您也可以使用箭头功能：

reader.onload = ()=>{this.setState({ image: reader.result });

this.setState不是一个函数（试图上传图片）ReactJs

2 个答案: