React改變?cè)貥邮降牟僮鞔a
三元運(yùn)算符
在React中，通過(guò)點(diǎn)擊事件來(lái)改變?cè)氐臉邮剑?/p>
- 在元素上設(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>
);
}我們?cè)谠厣显O(shè)置了onClick 屬性，所以每當(dāng)元素被點(diǎn)擊時(shí)，handleClick函數(shù)就會(huì)被調(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 語(yǔ)句十分相似。換句話說(shuō)，如果isActive 變量值為true，我們會(huì)設(shè)置backgroundColor屬性為salmon，否則設(shè)置為空字符串。
你可以用這種方法來(lái)改變組件中任何元素的樣式，它不一定是用戶點(diǎn)擊的那個(gè)。
currentTarget
同樣的，你可以使用event對(duì)象上的currentTarget屬性。
- 在元素上設(shè)置
onClick屬性。 - 在事件處理函數(shù)中，通過(guò)
event.currentTarget訪問(wèn)元素。 - 在元素上使用
style對(duì)象設(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>
);
}我們可以通過(guò)event對(duì)象上的currentTarget屬性來(lái)訪問(wèn)元素。event上的currentTarget屬性讓我們可以訪問(wèn)事件監(jiān)聽(tīng)器所連接的元素。
下面的示例向我們展示了，如何通過(guò)點(diǎn)擊事件改變?cè)厣系臉邮健?/p>
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è)樣式，你可以直接通過(guò)元素的style對(duì)象設(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)有的類，如果該類存在的話。否則，它會(huì)將該類添加到該元素中。
到此這篇關(guān)于React技巧之改變?cè)貥邮降奈恼戮徒榻B到這了,更多相關(guān)react改變?cè)貥邮絻?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
useState 通過(guò)在函數(shù)組件里調(diào)用它來(lái)給組件添加一些內(nèi)部 state，React 會(huì)在重復(fù)渲染時(shí)保留這個(gè) state，接下來(lái)通過(guò)一個(gè)示例來(lái)看看怎么使用 useState吧2021-06-06
這篇文章主要為大家介紹了React Native功能豐富的Toast通知庫(kù)使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
React應(yīng)用中避免白屏現(xiàn)象的方法小結(jié)
在開(kāi)發(fā)React應(yīng)用程序時(shí),我們都曾遇到過(guò)這樣的場(chǎng)景：一個(gè)未被捕獲的異常突然中斷了組件的渲染流程,導(dǎo)致用戶界面呈現(xiàn)出一片空白,也就是俗稱的“白屏”現(xiàn)象,本文將探討如何在React應(yīng)用中有效捕獲并處理這些錯(cuò)誤,避免白屏現(xiàn)象的發(fā)生,需要的朋友可以參考下2024-06-06
這篇文章主要為大家介紹了在Iconfont還是不能上傳，要如何維護(hù)你的Icon，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了如何使用react-dnd編寫一個(gè)可拖拽排列的list,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
在單頁(yè)面里面，父子組件傳值是比較常見(jiàn)的，這篇文章主要介紹了React父子組件間的傳值的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
React內(nèi)部實(shí)現(xiàn)cache方法示例詳解
這篇文章主要為大家介紹了React內(nèi)部實(shí)現(xiàn)cache方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React項(xiàng)目經(jīng)驗(yàn)總結(jié)及遇到的坑
這篇文章主要介紹了React項(xiàng)目經(jīng)驗(yàn)總結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
react?hooks?計(jì)數(shù)器實(shí)現(xiàn)代碼
這篇文章主要介紹了react?hooks計(jì)數(shù)器實(shí)現(xiàn)代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別
本文主要介紹了react-router中Link標(biāo)簽和a標(biāo)簽有什么區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06