javascript - 使用 ReactJS 旋转图像预览

Question

我正在尝试使用 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'));

据我所知，这两者似乎都可以单独工作，但我不知道从哪里开始让它们一起工作，或者是否可能。任何帮助将不胜感激!

Answer 1

看来你们真的很接近了!实际上，您在 render 方法中为条件渲染设置了良好的结构，现在返回 RotateIMG 组件，而不是返回 div:

import RotateIMG from './rotateIMG.js';
...
render() {
    const { imagePreviewUrl } = this.state;
    let $imagePreview = null;
    if (imagePreviewUrl) {
      $imagePreview = <RotateIMG src={imagePreviewUrl} />;
    } else {
      $imagePreview = <div className="previewText"></div>;
    }
    ...
}

然后，您需要调整 RotateIMG 组件以确保其已导出并停止将其直接渲染到根目录。

export default class RotateIMG extends React.Component{
  ...
  render(){
    const { rotation } =  this.state;
    return <div><img style={{transform: `rotate(${rotation}deg)`}} src={this.props.src} width="600" />
      <input onClick={this.rotateleft} type="button" value="left" />
      <input onClick={this.rotate} type="button" value="right" />
    </div>
  }
}

从 RotateIMG 组件中删除以下内容

const element = <RotateIMG /> 

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