Javascript 反应-为相邻元素切换颜色

我正在创建一个游戏板，在切换按钮div的背景色时遇到问题。切换功能适用于单独单击“按钮”（样式化div），但当我单击相邻按钮时，需要两次单击才能获得下一个按钮以更改其背景颜色。如何让相邻按钮在第一次单击时切换？我读过一些相关的帖子，比如（）但是仍然很难让它正常工作-

相关代码如下：， 完整代码：

泰

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
颜色：“#FFF”，
白色：是的，
当前单词：“”，
董事会1:[]，
第1行：[“aaafrs”、“aaeeee”、“aafirs”、“adenn”、“aeeeem”]，
}
this.clicked=this.clicked.bind（this）；
}
组件willmount（）{
让letter1=''；
this.state.row1.forEach（die=>{
letter1=模具[Math.floor（Math.random（）*6）].toUpperCase（）；
如果（字母1=='Q'）{
this.state.board1.push（“Qu”）
}否则{
此。状态。板1。推（字母1）；
}
})
}
点击（事件）{
//更改背景色
让newColor=this.state.color==“#FFF”？“#accec”：“#FFF”；
this.setState（{color:newColor}）；
event.target.style.backgroundColor=newColor；
}
渲染（）{
报税表（
{
this.state.board1.map（（字母、索引）=>{
返回(
{this.clicked（e）}>
{字母}
)
})}
) 
}

问题是：

您正在为所有元素bg切换维护一个变量， 所以代码按它应该的方式工作

没有必要为此维护状态

---

您可以做的是：

像这样设置额外属性

数据颜色

<div className="btn" data-color='#FFF' onClick={(e) => {this.clicked(e)}}>

clicked(event) {

    // get current color of element
    let currentColor = event.target.attributes['data-color'].value;

    // apply condition based upon currentColor
    let newColor = currentColor === "#FFF" ? "#ACCEEC" : "#FFF";

    // set the bg color 
    event.target.style.backgroundColor = newColor;

    // change the data-color value to currentColor
    event.target.setAttribute('data-color' , newColor);

    // add letter to state.currentWord
    let letter = event.target.innerText;
    this.setState({ currentWord: this.state.currentWord + letter })
}

以下是工作小提琴的链接：

---

你的板随着点击而移动：oIt更多的是javascript问题，所以我编辑了标签。我猜问题出在这个代码

var newColor=this.state.color==“#FFF”？“#ACCEEC”：“FFF”；this.setState（{color:newColor}）；event.target.style.backgroundColor=newColor问题处于状态并已更新。请注意，在初始状态之后，所有按钮都不会按预期进行“切换”。如前所述，“…需要两次单击。”^感谢您的明确解释，您是否知道如何选择渲染中的元素，以便我可以在单击要使用的提交（submitWord方法）时清除黑板（即数据颜色：“#FFF”，适用于所有具有数据颜色属性的div）。setAttribute属性，我试着使用document.body.querySelector（“div.btn”）之类的东西谢谢you@Lyddem，请您接受并向上投票，因为它解决了您当前的问题？要再次将all设置为白色，您可以在类名上使用querySelector并循环遍历每个元素，并将数据颜色设置为白色，
clicked(event) {

    // get current color of element
    let currentColor = event.target.attributes['data-color'].value;

    // apply condition based upon currentColor
    let newColor = currentColor === "#FFF" ? "#ACCEEC" : "#FFF";

    // set the bg color 
    event.target.style.backgroundColor = newColor;

    // change the data-color value to currentColor
    event.target.setAttribute('data-color' , newColor);

    // add letter to state.currentWord
    let letter = event.target.innerText;
    this.setState({ currentWord: this.state.currentWord + letter })
}