React中的內(nèi)聯(lián)CSS樣式：如何實(shí)現(xiàn)：hover？

lushan 發(fā)布于2019-08-21 18:38 / 3289人閱讀

摘要：這里主要介紹的是通過(guò)，事件來(lái)改變狀態(tài)希望大家喜歡，也希望大家指點(diǎn)錯(cuò)誤，也可以加入群，大家一起討論，一起進(jìn)步，后續(xù)更新中

這里主要介紹的是通過(guò)onMouseEnter，onMouseLeave事件來(lái)改變狀態(tài)

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: "red"}
    } else {
      linkStyle = {backgroundColor: "blue"}
    }
    return(
      
        Link
      
    )
  }

希望大家喜歡，也希望大家指點(diǎn)錯(cuò)誤，也可以加入qq群439667347，大家一起討論，一起進(jìn)步，后續(xù)更新中...

GPU云服務(wù)器云服務(wù)器 vue綁定內(nèi)聯(lián)樣式 html的內(nèi)聯(lián)樣式 css內(nèi)聯(lián) 內(nèi)聯(lián)css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90664.html

相關(guān)文章

【全棧React】第9天: 樣式

摘要：我們將為組件賦值，并使用選擇器來(lái)定位頁(yè)面上的元素，讓瀏覽器處理樣式。的工作方式是將因此命名父樣式作為子樣式的樣式。這通常是錯(cuò)誤的原因，因?yàn)轭愅ǔ＞哂型ㄓ妹Q，并且易于覆蓋非特定類的類樣式。反之，我們的樣式名稱需要使用駝峰命名方式。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3820原文：https://www.fullsta...

zilu 2019-08-20 18:33 評(píng)論0 收藏0
React系列 --- 從使用React了解Css的各種使用方案(六)

摘要：當(dāng)然這不是只限于使用或者其他打包工具的方式都能支持使用優(yōu)點(diǎn)模塊化和可重用性沒(méi)有沖突顯性依賴不會(huì)污染全局可以配合預(yù)處理器使用少開(kāi)發(fā)單獨(dú)文件寫(xiě)法基本一致 To define is to limit. 定義一樣?xùn)|西，就意味著限制了它?！鯛柕?《道林·格雷的畫(huà)像》 React系列 React系列 --- 簡(jiǎn)單模擬語(yǔ)法(一)React系列 --- Jsx, 合成事件與Refs(二)Reac...

freecode 2019-08-26 10:37 評(píng)論0 收藏0
【譯】統(tǒng)一樣式語(yǔ)言

摘要：原文地址原文作者譯文出自掘金翻譯計(jì)劃譯者校對(duì)者統(tǒng)一樣式語(yǔ)言在過(guò)去幾年中，我們見(jiàn)證了的興起，尤其是在社區(qū)。根本上來(lái)說(shuō)，純粹用于只是一個(gè)命名規(guī)范，它要求樣式的類名要遵守的模式。原文地址：A Unified Styling Language 原文作者：Mark Dalgleish 譯文出自：掘金翻譯計(jì)劃譯者：ZhangFe 校對(duì)者：JackGit,yifili09 統(tǒng)一樣式語(yǔ)言在過(guò)...

fjcgreat 2019-08-29 12:49 評(píng)論0 收藏0
CSS常見(jiàn)問(wèn)題小結(jié)

摘要：常見(jiàn)問(wèn)題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫(xiě)在具體網(wǎng)頁(yè)中的一個(gè)元素內(nèi)比如一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁(yè)面的時(shí)候需要為很多的標(biāo)簽設(shè)置屬性，所以會(huì)導(dǎo)致頁(yè)面不夠純凈，文件體積過(guò)大不利于，后期維護(hù)成本高。 CSS常見(jiàn)問(wèn)題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式行內(nèi)樣式：代碼寫(xiě)在具體網(wǎng)頁(yè)中的一個(gè)元素內(nèi)；比如：一般不需要擔(dān)心樣式優(yōu)先級(jí)與樣式覆蓋在制作頁(yè)面的時(shí)...

ivyzhang 2019-08-30 10:48 評(píng)論0 收藏0
如何把 alibaba Rax 組件轉(zhuǎn)換到 React 下

摘要：如何轉(zhuǎn)換知道了二者的不同，那么如何轉(zhuǎn)換我們也就有方向了。因?yàn)橄旅總€(gè)元件本身就是一個(gè)普通的組件，我們可以通過(guò)直接把他們當(dāng)作其他組件轉(zhuǎn)換為的代碼來(lái)使用。至于如何把這個(gè)放到上，我們放到后面一起說(shuō)。背景最近接手公司的一個(gè)移動(dòng)端項(xiàng)目，是通過(guò) Rax 作為 dsl 開(kāi)發(fā)的，在發(fā)布的時(shí)候構(gòu)建多分代碼，在 APP 端編譯為能夠運(yùn)行在 weex 上的代碼，在 H5（跑在瀏覽器或者 webview 里面...

Hydrogen 2019-08-26 10:56 評(píng)論0 收藏0