2017-06-11 80 views
-1

試圖改變我的標題背景顏色(開始,最終我會改變更多的風格。)通過點擊。三元運算符不爲這個狀態工作js

但是它無法工作。

toggleHeader(){ 
    var newState; 
    newState = "headerBig" ? "headerSmall" : "headerBig"; 
    this.setState({ 
    toggleHeader: newState 
}) 

}

我試圖改變的是我的頭的className = {} this.state.toggleHeader

難道我不這樣做對嗎?

控制檯日誌在其更改一次後會一直返回「headerSmall」。

固定

我用這個代碼來解決它...... 補充說:「isHeaderBig」的狀態,我切換這一點。似乎是工作的兩倍,但是。

toggleHeader(){ var newState = (this.state.isHeaderBig ? "headerSmall" : "headerBig"); this.setState({ toggleHeader: newState, isHeaderBig: !this.state.isHeaderBig }) }

+0

你正在測試一個字符串,而不是一個變量。 –

+0

「headerBig」是truthy ... –

+0

謝謝,我現在看到我的不喜歡的方式。 :( – ELI7VH

回答

0
toggleHeader(){ 
var newState; 
newState = this.state.toggleHeader === "headerBig" ? "headerSmall" : "headerBig"; 
this.setState({ 
toggleHeader: newState 

})

這是正確的方式, 「headerBig」 始終是真實的

+0

哦,jeez。我是怎麼忘記的。非常感謝 :) – ELI7VH

0

與三元運算符寫入行的正確的方法是:

newState = newState === "headerBig" ? "headerSmall" : "headerBig"; 

通知書上的?左邊的比較。

否則,只是"headerBig"將始終評估爲true和三元運算符將始終返回"headerSmall"。這是第一個問題。

第二個是你必須保持newState以外的的功能,否則它會鬆開點擊之間的狀態。

這是一個工作示例:

var newState = "headerBig"; // outside the handler 
 

 
$("#headertest").on("click",() => { 
 
    newState = newState === "headerBig" ? "headerSmall" : "headerBig"; // with condition 
 
    $("#headertest").text(newState); 
 
}); 
 

 
$("#headertest").text(newState); // initialize
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="headertest"></div>

+0

但他使用'var newState;''對此有何評論? –

+0

謝謝!我已將此代碼添加到代碼並回答! – pid

+0

是這個jQuery?所以我應該在渲染之前設置newState,然後將它傳遞給onClick函數? – ELI7VH

0
newState = "headerBig" ? "headerSmall" : "headerBig"; 

是基本相同

if ("headerBig") { 
    newState = "headerSmall" 
} else { 
    newState = "headerBig" 
} 

你看到的問題是什麼? "headerBig"是truthy,所以第一種情況會跑路。

也許你的意思是這樣的:

newState = oldState === "headerBig" ? "headerSmall" : "headerBig";