css+hooks图片点击旋转90°，再次点击回到正常。添加点击事件，通过transform：rotate属性实现

原创于 2021-01-06 15:00:56 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

这篇博客介绍了如何在React应用中利用Hooks来为图片添加点击事件，并通过状态切换控制图片旋转。通过设置状态变量`rotateimg`，每次点击图片时，图片将根据当前状态在0度和90度之间切换，实现简单的动画效果。这展示了React Hooks在状态管理和组件交互上的便捷性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给图片加点击事件，用hooks写法记录每次点击的状态

const [rotateimg,setRotateimg]=useState<boolean>(true)

点击一次就旋转90度，再次点击又回到0度。
（三元运算）

<img src={img} onCilck={()=>setRotateimg(!rotateimg)}
style={{transform:!rotateimg?"rotate(0deg)":"rotate(90deg)"}}
/>