3元演算子がthis.stateと反応しない反応するjs

Question

ヘッダーの背景色を変更しようとしています（最初は、スタイルでさらに変更します）。

ただし、動作しません。

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

}

私は変更しようとしている何を私のヘッダークラ​​ス名は= {} this.state.toggleHeader

私はこの権利を致しておりませんか？

コンソールログは、一度変更されると "headerSmall"を返し続けます。私はそれを修正するために、このコードを使用し

固定

は... は「isHeaderBig」の状態を追加したと私はあまりにもことをトグルしています。二重の仕事のように思えるが、しかし。

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

Answer 1

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

}）

、 "headerBigは、" あなたは、文字列ではなく、変数をテストしている

Answer 2

三項演算子でラインを書くの正しい方法は次のとおりです。

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

お知らせ?の左側の比較。

そうでない場合、"headerBig"は常にtrueと評価され、3進演算子は常に"headerSmall"を返します。これが最初の問題です。

もう1つは、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>

Answer 3

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

は、問題が何であるかを参照してください基本的に

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

と同じですか？ "headerBig"は真実ですので、最初のケースは実行されます。

はおそらく、あなたのような何かを意味：これは正しい方法である

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