样式化组件 onClick 旋转元素

Question

我正在尝试在单击时向元素添加旋转。每次我想点击元素时，元素都应该旋转。我正在使用 CSS transform 属性旋转元素。波纹管是我的样式组件：

const IconButtonWrapper = styled.div`

  transform: rotate(0deg);

  overflow: hidden;

  transition: all 0.3s ease-out;

  ${({ rotate }) => rotate && `transform: rotate(360deg)`};

`;

我有呈现元素并具有onClick事件的 React 组件：

const IconButtonContainer = () => {

  const [rotate, setRotate] = useState(false);

  const handleClick = () =>

    setRotate(

      (prevState) => ({ rotate: !prevState.rotate }),

      () => console.log(this.state.rotate)

    );

  return (

    <IconButtonWrapper rotate={rotate} onClick={handleClick}>

      <IconButton />

    </IconButtonWrapper>

  );

};

当我第一次点击时，一切都按预期工作，但是当我第二次点击时，就不再工作了。我觉得我应该rotate: false在转换后返回到默认状态，但我如何在样式化组件中做到这一点？

这是一个工作沙箱的链接

Answer 1

从技术上讲，rotate它已经是一个布尔值，所以也prevState应该是一个布尔值。您还试图将对象设置为rotatestate 值而不是简单的boolean。基于此，您只需要否定prevState而不是prevState.rotate：setRotate(prevState => !prevState)

Answer 2

问题是通过将代码更改handleClick为：import React, { useState } from "react";import ReactDOM from "react-dom";import styled from "styled-components";import "./styles.css";const IconButton = () => <button>Icon</button>;const IconButtonWrapper = styled.div`&nbsp; transform: rotate(0deg);&nbsp; overflow: hidden;&nbsp; transition: all 0.3s ease-out;&nbsp; ${({ rotate }) => rotate && `transform: rotate(360deg)`};`;const IconButtonContainer = () => {&nbsp; const [rotate, setRotate] = useState(false);&nbsp; const handleClick = () => setRotate((prevState) => (!prevState ));&nbsp; return (&nbsp; &nbsp; <IconButtonWrapper rotate={rotate} onClick={handleClick}>&nbsp; &nbsp; &nbsp; <IconButton />&nbsp; &nbsp; </IconButtonWrapper>&nbsp; );};function App() {&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <IconButtonContainer />&nbsp; &nbsp; </div>&nbsp; );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);prevState已经有最新的价值，rotate但你正在把它转换成一个对象。setRotate((prevState) => (!prevState ));会做。

Answer 3

试试这个。const&nbsp;handleClick&nbsp;=&nbsp;()&nbsp;=>&nbsp;setRotate(!rotate);