Tester component

import React, { Component } from 'react'
import ImageEditor from './ImageEditor'
import SliderControl from './SliderControl'
import Sidekick from './Sidekick'

export default class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {}
        this.imageEditor = React.createRef();
    }

    handleSubmit(e) {
        this.setState({
            crop: this.imageEditor.current.getCroppedCanvas()
        });
    }

    handleRotation(value){
        this.imageEditor.current.rotateTo(value);
    }

    handleScaling(value){
        this.imageEditor.current.scale(value);
    }

    handleHorizontalMoving(xPos){
        const canvasData = this.imageEditor.current.getCanvasData();
        console.log(canvasData);
        this.imageEditor.current.moveTo(xPos * canvasData.width, canvasData.top);
    }

    handleVerticalMoving(yPos){
        const canvasData = this.imageEditor.current.getCanvasData();
        this.imageEditor.current.moveTo(canvasData.left, yPos * canvasData.height);
    }

    handleInput(e) {
        this.setState({
            image: URL.createObjectURL(e.target.files[0])
        })
    }

    render() {
        return (
            <div style={{
                position: "absolute",
                top: 0,
                left: 0,
                display: "flex",
                background: "#f6f6f6",
                padding: "2rem 1rem",
                width: "100%",
                height: "100%",
                margin: "0 auto",
            }}>
                <div style={{
                    width: '100%',
                    maxWidth: 1024,
                    margin: '0 auto',
                    display: "flex"
                }} >

                    <div style={{
                        flexGrow: 2,
                        padding: "1rem",
                        display: "flex"
                    }}>
                        <div style={{
                            position: "relative",
                            flexGrow: 1
                        }}>
                            {this.state.image &&
                                <ImageEditor
                                    ref={this.imageEditor}
                                    imageURI={this.state.image}

                                />}
                        </div>
                    </div>
                    <div style={{
                        flexGrow: 1,
                        padding: "1rem"
                    }}>
                        <Sidekick title="Title">
                            <SliderControl
                                label="Rotation"
                                iconName="sync-alt"
                                minValue={-90}
                                maxValue={90}
                                defaultValue={0}
                                step={0.01}
                                onChange={this.handleRotation.bind(this)}
                            />
                            <SliderControl
                                label="X-pos"
                                iconName="arrows-alt-h"
                                minValue={-1}
                                maxValue={1}
                                defaultValue={0}
                                step={0.01}
                                onChange={this.handleHorizontalMoving.bind(this)}
                            />
                            <SliderControl
                                label="Y-pos"
                                iconName="arrows-alt-v"
                                minValue={-1}
                                maxValue={1}
                                defaultValue={0}
                                step={0.01}
                                onChange={this.handleVerticalMoving.bind(this)}
                            />
                            <SliderControl
                                label="Scaling"
                                iconName="expand"
                                minValue={.5}
                                maxValue={1.5}
                                defaultValue={1}
                                step={0.01}
                                onChange={this.handleScaling.bind(this)}
                            />
                            <input type="submit" onClick={this.handleSubmit.bind(this)}/>
                        </Sidekick>
                        <input type="file" onChange={this.handleInput.bind(this)} />
                        {
                            this.state.crop &&
                            <img src={this.state.crop} alt=""/>
                        }
                    </div>
                </div>
            </div>
        )
    }
}