快捷導(dǎo)航

React改變?cè)貥邮降牟僮鞔a

更新時(shí)間：2023年05月27日 09:30:19 作者：火焰兔

這篇文章主要介紹了React技巧之改變?cè)貥邮?本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

三元運(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í)切換樣式，你就必須有條件地檢查該類(lèi)是否存在，如果存在就將其刪除，否則就添加該類(lèi)。

如果你需要為元素添加樣式，可以使用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)有的類(lèi)，如果該類(lèi)存在的話。否則，它會(huì)將該類(lèi)添加到該元素中。

到此這篇關(guān)于React技巧之改變?cè)貥邮降奈恼戮徒榻B到這了,更多相關(guān)react改變?cè)貥邮絻?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

React改變?cè)貥邮降牟僮鞔a

三元運(yùn)算符

currentTarget

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具