Question

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

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

的链接

Answer 1

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

基于此，您只需要将prevState取反，而无需将prevState.rotate取反：

setRotate(prevState => !prevState)

请参阅从!prevState.rotate到!prevState的代码修改。

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

Answer 2

尝试一下。

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

Answer 3

问题正在解决，方法是将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 ));可以。

样式化的组件onClick旋转元素

3 个答案: