React改變元素樣式的操作代碼
三元運算符
在React中，通過點擊事件來改變元素的樣式：
- 在元素上設(shè)置
onClick屬性。 - 當(dāng)元素被點擊時，設(shè)置激活的
state。 - 使用三元運算符，基于
state變量有條件地設(shè)置新樣式。
import {useState} from 'react';
export default function App() {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
// ?? toggle
setIsActive(current => !current);
// ?? or set to true
// setIsActive(true);
};
return (
<div>
<button
style={{
backgroundColor: isActive ? 'salmon' : '',
color: isActive ? 'white' : '',
}}
onClick={handleClick}
>
Click
</button>
</div>
);
}我們在元素上設(shè)置了onClick 屬性，所以每當(dāng)元素被點擊時，handleClick函數(shù)就會被調(diào)用。在該函數(shù)中，我們只是切換isActive狀態(tài)。
如果你不想在每次點擊元素時改變樣式，你可以將狀態(tài)設(shè)置為激活，例如
setIsActive(true)。
我們使用三元運算符，有條件地在元素上設(shè)置backgroundColor 樣式。
<button
style={{
backgroundColor: isActive ? 'salmon' : '',
color: isActive ? 'white' : '',
}}
onClick={handleClick}
>
Click
</button>三元運算符與if/else 語句十分相似。換句話說，如果isActive 變量值為true，我們會設(shè)置backgroundColor屬性為salmon，否則設(shè)置為空字符串。
你可以用這種方法來改變組件中任何元素的樣式，它不一定是用戶點擊的那個。
currentTarget
同樣的，你可以使用event對象上的currentTarget屬性。
- 在元素上設(shè)置
onClick屬性。 - 在事件處理函數(shù)中，通過
event.currentTarget訪問元素。 - 在元素上使用
style對象設(shè)置樣式。
export default function App() {
const handleClick = event => {
event.currentTarget.style.backgroundColor = 'salmon';
event.currentTarget.style.color = 'white';
event.currentTarget.classList.add('my-class-1', 'my-class-2');
};
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}我們可以通過event對象上的currentTarget屬性來訪問元素。event上的currentTarget屬性讓我們可以訪問事件監(jiān)聽器所連接的元素。
下面的示例向我們展示了，如何通過點擊事件改變元素上的樣式。
export default function App() {
const handleClick = event => {
// ?? toggle styles on click
if (event.currentTarget.style.backgroundColor) {
event.currentTarget.style.backgroundColor = null;
event.currentTarget.style.color = null;
} else {
event.currentTarget.style.backgroundColor = 'salmon';
event.currentTarget.style.color = 'white';
}
// ?? toggle class on click
event.currentTarget.classList.toggle('my-class-1', 'my-class-2');
};
發(fā)。
return (
<div>
<button onClick={handleClick}>Click</button>
</div>
);
}如果你需要在點擊時為元素設(shè)置一個樣式，你可以直接通過元素的style對象設(shè)置樣式。
event.currentTarget.style.backgroundColor = 'salmon';
然而，如果你必須在每次點擊元素時切換樣式，你就必須有條件地檢查該類是否存在，如果存在就將其刪除，否則就添加該類。
如果你需要為元素添加樣式，可以使用classList.add方法。
// ?? add class
event.currentTarget.classList.add('my-class-1', 'my-class-2');
// ?? remove class
event.currentTarget.classList.remove('my-class-1', 'my-class-2');該方法可以可以傳遞一個或多個class。
如果你需要在點擊時為元素切換樣式，可以使用classList.toggle方法。
event.currentTarget.classList.toggle('my-class-1', 'my-class-2');classList.toggle方法從元素中移除一個現(xiàn)有的類，如果該類存在的話。否則，它會將該類添加到該元素中。
到此這篇關(guān)于React技巧之改變元素樣式的文章就介紹到這了,更多相關(guān)react改變元素樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
useState 通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部 state，React 會在重復(fù)渲染時保留這個 state，接下來通過一個示例來看看怎么使用 useState吧2021-06-06
這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React應(yīng)用中避免白屏現(xiàn)象的方法小結(jié)
在開發(fā)React應(yīng)用程序時,我們都曾遇到過這樣的場景：一個未被捕獲的異常突然中斷了組件的渲染流程,導(dǎo)致用戶界面呈現(xiàn)出一片空白,也就是俗稱的“白屏”現(xiàn)象,本文將探討如何在React應(yīng)用中有效捕獲并處理這些錯誤,避免白屏現(xiàn)象的發(fā)生,需要的朋友可以參考下2024-06-06
這篇文章主要為大家介紹了在Iconfont還是不能上傳，要如何維護(hù)你的Icon，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了如何使用react-dnd編寫一個可拖拽排列的list,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
在單頁面里面，父子組件傳值是比較常見的，這篇文章主要介紹了React父子組件間的傳值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
React內(nèi)部實現(xiàn)cache方法示例詳解
這篇文章主要為大家介紹了React內(nèi)部實現(xiàn)cache方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了React項目經(jīng)驗總結(jié),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
react?hooks?計數(shù)器實現(xiàn)代碼
這篇文章主要介紹了react?hooks計數(shù)器實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別
本文主要介紹了react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06