三元运算符不适用于this.state react 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，三元运算符将始终返回 "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>

Answer 3

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

基本相同

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

你明白问题出在哪里了吗？ "headerBig"是真实的，所以第一种情况会运行。

也许你的意思是这样的：

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