用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方法，現在不是返回一個div，返回RotateIMG組件：

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> 
    } 
} 

在旋轉左 'newRotation <= 0' 取下RotateIMG組件的以下

const element = <RotateIMG /> 

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