样式化组件 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`

  transform: rotate(0deg);

  overflow: hidden;

  transition: all 0.3s ease-out;

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

`;

const IconButtonContainer = () => {

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

  const handleClick = () => setRotate((prevState) => (!prevState ));

  return (

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

      <IconButton />

    </IconButtonWrapper>

  );

};

function App() {

  return (

    <div className="App">

      <IconButtonContainer />

    </div>

  );

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

prevState已经有最新的价值，rotate但你正在把它转换成一个对象。setRotate((prevState) => (!prevState ));会做。

Answer 3

试试这个。

const handleClick = () => setRotate(!rotate);