Implementing this in Reactjs

Question

I have a rotating function in js with html and css files. How can I implementing this in Reactjs? It's not working in React, but if I try to compile it online, it works.

html section:

<button id="button">Click me!</button> <div id="container">   <img src="https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg" id="image" /> </div>

js section:

 var angle = 0,
  img = document.getElementById('container');
document.getElementById('button').onclick = function() {
  angle = (angle + 90) % 180;
  img.className = "rotate" + angle;
}

css section:

#container {
   max-width: 100%;
   max-height: 100%;
  overflow: hidden;
}
#container.rotate90,
#container.rotate270 {
  max-width: 100%;
  max-height: 100%;
}
#image {
  transform-origin: top left;
  /* IE 10+, Firefox, etc. */
  -webkit-transform-origin: top left;
  /* Chrome */
  -ms-transform-origin: top left;
  /* IE 9 */
   max-width: 100%;
    transition: all 1400ms; 
}
#container.rotate90 #image {
  transform: rotate(90deg) translateY(-100%);
  -webkit-transform: rotate(90deg) translateY(-100%);
  -ms-transform: rotate(90deg) translateY(-100%);
}

wdm · Accepted Answer · 2018-12-14 20:19:57Z

1

In this example a button click will trigger the handleClick event handler which will update this.state.imageClass.

Demo: https://codesandbox.io/s/149v7k4ox4

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            angle: 0,
            imageClass: ''
        };
    }
    handleClick = () => {
        const angle = (this.state.angle + 90) % 180;
        this.setState({
            angle,
            imageClass: "rotate" + angle
        });
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>Click me!</button>
                <div id="container" className={this.state.imageClass}>
                    <img id="image" src="..."/>
                </div>
            </div>
        );
    }
}

edited Dec 14, 2018 at 20:19

answered Dec 14, 2018 at 20:08

wdm

7,1891 gold badge31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implementing this in Reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related