javascript - 在 Reactjs 中实现这个

Question

我在 js 中有一个带有 html 和 css 文件的旋转函数。我如何在 Reactjs 中实现这个？它在 React 中不起作用，但如果我尝试在线编译它，它就可以工作。

html 部分:

<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 部分:

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

CSS 部分:

#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%);
}

Answer 1

在此示例中，单击按钮将触发 handleClick 事件处理程序，该处理程序将更新 this.state.imageClass。

演示: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>
        );
    }
}