三元运算符不适用于 this.state React js

Question

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

然而它无法工作。

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

}

我想改变的是我的 header className={this.state.toggleHeader}

我这样做不对吗？

控制台日志在更改一次后一直返回"headerSmall"。

固定

我用这段代码来修复它... 添加了 "isHeaderBig" 状态，我也在切换它。似乎是双倍的工作，但是。

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

Answer 1

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

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

注意?左边的比较。

否则，"headerBig" 将始终计算为 true，而三元运算符将始终为 return "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 2

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

与

基本相同

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

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

也许你的意思是这样的：

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

Answer 3

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

})

这是正确的方法，"headerBig"总是正确的

三元运算符不适用于 this.state React js

ternary operator not working for this.state react js

javascript

css

jsx

reactjs