gpt4 book ai didi

javascript - 样式化组件 onClick 旋转元素

转载 作者:行者123 更新时间:2023-12-04 08:51:01 24 4
gpt4 key购买 nike

我试图在单击时向元素添加旋转。每次我想点击元素时,元素应该旋转。我正在使用 CSS 变换属性旋转元素。波纹管是我的样式组件:

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

最佳答案

技术上 rotate已经是 bool 值 所以prevState应该是 bool 值 以及。您还试图将对象设置为 rotate状态值而不是简单的 bool 值 .
基于此,您只需要否定 prevState而不是 prevState.rotate作为:

setRotate(prevState => !prevState)
查看来自 !prevState.rotate的代码修改至 !prevState .
还建议阅读 Using the State Hook .它与类组件有点不同。

关于javascript - 样式化组件 onClick 旋转元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64105970/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com