使用ReactJS旋转图像预览

我正在尝试使用ReactJS旋转图像的预览。因此，我首先允许呈现预览功能的上传功能，然后在用户点击上传之前，我希望他们可以选择将图像旋转到自己喜欢的位置。这是我用来预览图像的内容：

class ImageUpload extends React.Component {
constructor(props) {
  super(props);
  this.state = {file: '',imagePreviewUrl: ''};
}

_handleImageChange(e) {
  e.preventDefault();

let reader = new FileReader();
let file = e.target.files[0];

reader.onloadend = () => {
  this.setState({
    file: file,
    imagePreviewUrl: reader.result
  });
}

reader.readAsDataURL(file)
}

render() {
let {imagePreviewUrl} = this.state;
let $imagePreview = null;
if (imagePreviewUrl) {
  $imagePreview = (<img src={imagePreviewUrl} />);
} else {
  $imagePreview = (<div className="previewText"></div>);
}

return (
  <div className="previewComponent">
    <form onSubmit={(e)=>this._handleSubmit(e)}>
      <input className="fileInput" 
        type="file" 
        onChange={(e)=>this._handleImageChange(e)} />
      <button className="submitButton" 
        type="submit" 
        onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>
    </form>
    <input type="button" value="< rotate" onClick="" />
    <input type="button" value="rotate >" onClick="" />
    <div className="imgPreview">
      {$imagePreview}
    </div>
  </div>
)
}}

ReactDOM.render(<ImageUpload/>, document.getElementById("mainApp"));

这就是我试图用来旋转图像的东西：

class RotateIMG extends React.Component{
constructor(props){
super(props);
this.state = {
  rotation: 0
}

this.rotate = this.rotate.bind(this);
this.rotateleft = this.rotateleft.bind(this);
}

rotate(){
  let newRotation = this.state.rotation + 90;
  if(newRotation >= 360){
    newRotation =- 360;
  }
    this.setState({
      rotation: newRotation,
    })
  }

  rotateleft(){
    let newRotation = this.state.rotation - 90;
    if(newRotation >= 360){
      newRotation =- 360;
    }
    this.setState({
      rotation: newRotation,
    })
  }

  render(){
    const { rotation } =  this.state;
    return <div><img style={{transform: `rotate(${rotation}deg)`}} src={"//blog-assets.risingstack.com/2016/Jan/react_best_practices-1453211146748.png"} width="600" />
      <input onClick={this.rotateleft} type="button" value="left" />
      <input onClick={this.rotate} type="button" value="right" />
    </div>
  }
}

const element = <RotateIMG /> 

ReactDOM.render(element, document.getElementById('root'));

据我所知，这两种方法似乎都可以很好地发挥作用，但是我不知道从哪里开始使它们一起工作，或者甚至是可行的。任何帮助将不胜感激！