Javascript 如何根据状态变量'；ReactJS中的s值

我正在用ReactJS编写一个项目。我有一些div可以被用户点击。默认情况下，每个div的背景色都应设置为绿色，但单击后应变为红色（这意味着已单击此特定div，进一步单击它不会产生任何差异）。我设置CSS类的想法是，在className中，我有一个基于数组中相应值的三元if语句。我提出的解决方案没有任何作用，没有出现错误。我怎样才能实现我的目标

代码：

类板扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
此.state={
fieldClicksArray：[
假,假,假,，
假,假,假,，
假，假，假
]
}
}
handleClick（索引）{
if（this.state.fieldClicksArray[index]==false）{
var newArray=this.state.fieldClicksArray；
newArray[index]=true；
这是我的国家({
fieldClicksArray:newArray
})
}
}
render（）{
返回(
this.handleClick（0）}>1
//母公司
)//返回
}//渲染
}//阶级
ReactDOM.render（，document.getElementById（“app”））

.red{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}

类板扩展React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
此.state={
fieldClicksArray：[
假,假,假,，
假,假,假,，
假，假，假
]
}
}
handleClick（索引）{
if（this.state.fieldClicksArray[index]==false）{
var newArray=this.state.fieldClicksArray；
newArray[index]=true；
这是我的国家({
fieldClicksArray:newArray
})
}
}
render（）{
返回(
this.handleClick（0）}>1
//母公司
)//返回
}//渲染
}//阶级
ReactDOM.render（，document.getElementById（“app”））

.red{
背景色：红色；
}
格林先生{
背景颜色：绿色；
}

---

您需要使用

setState（）

。并克隆阵列，这样就不会改变以前的状态。最后，当从上一个状态计算下一个状态时，最好使用函数形式

setState（）

handleClick(index) {
  this.setState((prevState) => {
    // make a copy
    let fieldClicksArray = prevState.fieldClicksArray.slice();
    // change one item
    fieldsClickArray[index] = true;
    // return next state to be merged
    return { fieldsClickArray };
  });
}

阅读更多：

---

希望这有帮助

您需要使用

setState（）

。并克隆阵列，这样就不会改变以前的状态。最后，当从上一个状态计算下一个状态时，最好使用函数形式

setState（）

handleClick(index) {
  this.setState((prevState) => {
    // make a copy
    let fieldClicksArray = prevState.fieldClicksArray.slice();
    // change one item
    fieldsClickArray[index] = true;
    // return next state to be merged
    return { fieldsClickArray };
  });
}

阅读更多：

---

希望这有帮助

我相信这句话：

newArray[index]==false您希望将其设置为true。我改变了这一点。此外，我尝试了你的建议，但仍然没有任何变化，也没有出现任何错误up@AleksanderSadaj有一些语法错误。我已经把它们移走了。请参阅代码段。这会直接修改状态，因为您正在对原始数组进行操作。好消息是您的代码可以正常工作，但坏消息是它会在渲染时触发handleClick函数，尽管onClick中有箭头函数。为什么会这样？我们怎样才能避免它？@Aleksandersaaj不，它没有。请运行代码段并参考代码段中的代码。我相信这一行：
newArray[index]==false您希望将其设置为true。我改变了这一点。此外，我尝试了你的建议，但仍然没有任何变化，也没有出现任何错误up@AleksanderSadaj有一些语法错误。我已经把它们移走了。请参阅代码段。这会直接修改状态，因为您正在对原始数组进行操作。好消息是您的代码可以正常工作，但坏消息是它会在渲染时触发handleClick函数，尽管onClick中有箭头函数。为什么会这样？我们怎样才能避免它？@Aleksandersaaj不，它没有。请运行代码段并参考代码段中的代码。不幸的是，此处的代码相同。div的背景颜色为红色，但在呈现时会发生变化-用户自己没有机会单击它，因为当页面呈现div时，它已经是红色的了。在onClick内部，我使用了箭头函数，所以它不应该立即触发，对吗？不幸的是，这里也是。div的背景颜色为红色，但在呈现时会发生变化-用户自己没有机会单击它，因为当页面呈现div时，它已经是红色的了。在onClick内部，我使用了arrow函数，所以它不会立即触发，对吗？
handleClick(index) {
  this.setState((prevState) => {
    // make a copy
    let fieldClicksArray = prevState.fieldClicksArray.slice();
    // change one item
    fieldsClickArray[index] = true;
    // return next state to be merged
    return { fieldsClickArray };
  });
}