样式化的组件 onClick 旋转元素答案

【问题标题】：Styled components onClick rotate element样式化的组件 onClick 旋转元素
【发布时间】：2021-01-14 06:14:15
【问题描述】：

我正在尝试在单击时向元素添加旋转。每次我想单击元素时，元素都应该旋转。我正在使用 CSS 变换属性旋转元素。 Bellow 是我的样式化组件：

const IconButtonWrapper = styled.div`
  transform: rotate(0deg);
  overflow: hidden;
  transition: all 0.3s ease-out;
  ${({ rotate }) => rotate && `transform: rotate(360deg)`};
`;

我有渲染元素的 React 组件并有 onClick 事件：

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，但是我该如何在样式化组件中做到这一点？

这是一个工作Sandbox的链接

【问题讨论】：

标签： javascript reactjs react-hooks styled-components

【解决方案1】：

将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 )); 可以。

【讨论】：

【解决方案2】：

试试这个。

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

【讨论】：

【解决方案3】：

从技术上讲，rotate 已经是一个布尔值，所以prevState 也应该是一个布尔值。此外，您还试图将对象设置为 rotate 状态值，而不是简单的 boolean。

基于此，您只需要否定prevState 而不是prevState.rotate：

setRotate(prevState => !prevState)

见!prevState.rotate到!prevState的代码修改。

还建议阅读Using the State Hook。它与类组件有点不同。

【讨论】：