首頁猿問樣式化組件 onClick 旋轉元素

樣式化組件 onClick 旋轉元素

JavaScript

蠱毒傳說 2023-04-01 16:04:43

我正在嘗試在單擊時向元素添加旋轉。每次我想點擊元素時，元素都應該旋轉。我正在使用 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在轉換后返回到默認狀態，但我如何在樣式化組件中做到這一點？這是一個工作沙箱的鏈接

查看完整描述

3 回答

烙印99

TA貢獻1829條經驗獲得超13個贊

從技術上講，rotate它已經是一個布爾值，所以也prevState應該是一個布爾值。您還試圖將對象設置為rotatestate 值而不是簡單的boolean。

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

setRotate(prevState?=>?!prevState)

反對回復 2023-04-01

喵喔喔

TA貢獻1735條經驗獲得超5個贊

問題是通過將代碼更改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>

);

};

function App() {

return (

</div>

);

}

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

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

prevState已經有最新的價值，rotate但你正在把它轉換成一個對象。setRotate((prevState) => (!prevState ));會做。

反對回復 2023-04-01

慕少森

TA貢獻2019條經驗獲得超9個贊

試試這個。

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

反對回復 2023-04-01

3 回答
0 關注
157 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

樣式化組件 onClick 旋轉元素

樣式化組件 onClick 旋轉元素

3 回答

添加回答