三元运算符不适用于this.state反应js答案

【问题标题】：ternary operator not working for this.state react js三元运算符不适用于this.state反应js
【发布时间】：2017-11-13 05:06:27
【问题描述】：

尝试通过单击更改我的标题背景颜色（首先，最终我将更改更多样式。）。

但它无法工作。

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 }) }

【问题讨论】：

你正在测试一个字符串，而不是一个变量。
"headerBig" 是真的...
谢谢我现在看到了我的笨拙方式。 :(

标签： javascript css reactjs jsx

【解决方案1】：

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

})

这是正确的方式，“headerBig”总是正确的

【讨论】：

天哪。我怎么忘记了。非常感谢:)

【解决方案2】：

用三元运算符写行的正确方法是：

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>

【讨论】：

但他使用var newState;对此有何评论？
这是 jQuery 吗？所以我应该在 render 之前设置 newState ，然后将它传递给函数 onClick?
所以我最终做的是将“this.state.toggleHeader”传递给函数，然后：`toggleHeader(s){ s = (s === "headerBig" ? "headerSmall" ： “头大”）； this.setState({ toggleHeader: s }) } `

【解决方案3】：

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

基本一样

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

你知道问题是什么吗？ "headerBig" 是真实的，所以第一个案例会运行。

也许你的意思是这样的：

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

【讨论】：