React改變元素樣式的操作代碼
三元運(yùn)算符
在React中，通過點(diǎn)擊事件來改變元素的樣式：
- 在元素上設(shè)置
onClick屬性。 - 當(dāng)元素被點(diǎn)擊時(shí)，設(shè)置激活的
state。 - 使用三元運(yùn)算符，基于
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)元素被點(diǎn)擊時(shí)，handleClick函數(shù)就會被調(diào)用。在該函數(shù)中，我們只是切換isActive狀態(tài)。
如果你不想在每次點(diǎn)擊元素時(shí)改變樣式，你可以將狀態(tài)設(shè)置為激活，例如
setIsActive(true)。
我們使用三元運(yùn)算符，有條件地在元素上設(shè)置backgroundColor 樣式。
<button
style={{
backgroundColor: isActive ? 'salmon' : '',
color: isActive ? 'white' : '',
}}
onClick={handleClick}
>
Click
</button>三元運(yùn)算符與if/else 語句十分相似。換句話說，如果isActive 變量值為true，我們會設(shè)置backgroundColor屬性為salmon，否則設(shè)置為空字符串。
你可以用這種方法來改變組件中任何元素的樣式，它不一定是用戶點(diǎn)擊的那個(gè)。
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)聽器所連接的元素。
下面的示例向我們展示了，如何通過點(diǎ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>
);
}如果你需要在點(diǎn)擊時(shí)為元素設(shè)置一個(gè)樣式，你可以直接通過元素的style對象設(shè)置樣式。
event.currentTarget.style.backgroundColor = 'salmon';
然而，如果你必須在每次點(diǎn)擊元素時(shí)切換樣式，你就必須有條件地檢查該類是否存在，如果存在就將其刪除，否則就添加該類。
如果你需要為元素添加樣式，可以使用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');該方法可以可以傳遞一個(gè)或多個(gè)class。
如果你需要在點(diǎn)擊時(shí)為元素切換樣式，可以使用classList.toggle方法。
event.currentTarget.classList.toggle('my-class-1', 'my-class-2');classList.toggle方法從元素中移除一個(gè)現(xiàn)有的類，如果該類存在的話。否則，它會將該類添加到該元素中。
到此這篇關(guān)于React技巧之改變元素樣式的文章就介紹到這了,更多相關(guān)react改變元素樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解
這篇文章主要為大家介紹了react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Reducer是個(gè)純函數(shù)，即只要傳入相同的參數(shù)，每次都應(yīng)返回相同的結(jié)果。不要把和處理數(shù)據(jù)無關(guān)的代碼放在Reducer里，讓Reducer保持純凈，只是單純地執(zhí)行計(jì)算，這篇文章主要介紹了Redux拆分reducer函數(shù)流程2022-09-09
react基于react-slick實(shí)現(xiàn)多圖輪播效果
React slick是一個(gè)使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實(shí)現(xiàn)多圖輪播效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
React+umi+typeScript創(chuàng)建項(xiàng)目的過程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項(xiàng)目的過程,結(jié)合代碼介紹了項(xiàng)目框架搭建的方式，本文給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
React無限滾動插件react-infinite-scroll-component的配置優(yōu)化技巧
react-infinite-scroll-component是React無限滾動插件,簡化滾動加載邏輯,支持自定義提示和觸發(fā)距離,兼容移動端,體積小巧,適用于列表、聊天等場景,需結(jié)合虛擬滾動優(yōu)化性能,本文介紹React無限滾動插件react-infinite-scroll-component的配置+優(yōu)化,感興趣的朋友一起看看吧2025-09-09
本篇文章主要介紹了react 父組件與子組件之間的值傳遞的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比,主要增加了兩個(gè)特性：事件代理、和事件自動綁定,本文主要介紹了React 組件中實(shí)現(xiàn)事件代理,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
解決React報(bào)錯(cuò)Cannot?find?namespace?context
這篇文章主要為大家介紹了React報(bào)錯(cuò)Cannot?find?namespace?context分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Remix后臺開發(fā)之remix-antd-admin配置過程
這篇文章主要為大家介紹了Remix后臺開發(fā)之remix-antd-admin配置過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
在create-react-app中使用css modules的示例代碼
這篇文章主要介紹了在create-react-app中使用css modules的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07