Question

尝试通过点击更改我的标题背景颜色（一开始，最终我会更改风格。）

然而，它无法工作。

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

}

我试图改变的是我的标题className = {this.state.toggleHeader}

我不是这样做的吗？

控制台日志不断返回＆＃34; headerSmall＆＃34;在它改变一次之后。

固定

我使用此代码修复它... 添加了＃34; isHeaderBig＆＃34;而且我也在切换。似乎是工作的两倍，但是。

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";

三元运算符不为此工作。状态反应js

3 个答案: