Javascript 无法在onClick-in-React上切换类

我正在努力学习如何在React中使用表单

这是一个带有可选择选项的表单

在onclick事件中，单击的span标记应该更改背景颜色（只是为了显示它已被单击），对于单个标记，我可以实现这一点，但是对于多个标记，如果我单击两个标记的单个span bg颜色都会更改

代码：

从“React”导入React；
类MyForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
userClick:true
};
this.handleChange=this.handleChange.bind（this）；
this.handleChange1=this.handleChange1.bind（this）；
}
手变（e）{
警报（`youselected…${e.target.textContent}`）；
这是我的国家({
userClick:！this.state.userClick
});
}
手柄更换1（e）{
警报（`youselected…${e.target.textContent}`）；
这是我的国家({
userClick:！this.state.userClick
});
}
render（）{
返回(
服务：
{" "}
inPerson{“}
事实上的
);
}
}
导出默认MyForm；

两个单击函数都在更改相同的状态变量，

userClick

。如果希望两个跨度独立运行，则需要两个状态变量，例如：

handleChange(e) {
  alert(`You selected... ${e.target.textContent}`);
  this.setState({
     firstSpanClick: !this.state.firstSpanClick
  });
}

handleChange1(e) {
  alert(`You selected... ${e.target.textContent}`);
  this.setState({
     secondSpanClick: !this.state.secondSpanClick
  });
}

<span onClick={this.handleChange1} className={this.state.firstSpanClick ? "youClicked" : "unClicked"}> Virtual</span>

<span onClick={this.handleChange2} className={this.state.secondSpanClick ? "youClicked" : "unClicked"}> Virtual</span>

---

它工作得很好。只是两个侦听器都在更改相同的状态（这是不推荐的）。非常感谢，这很有效。我有一个后续问题，比如说如果有多个选项（span标记），我是否需要为每个span标记遵循相同的实践，或者是否有与getElementsByTagName等效的东西并运行循环来进行单击的更改？请参见下面的示例，你可以在span中添加一个不同的名称，然后使用相同的handleChange。我在发表评论后看到了这一点。谢谢。如果它是一个表单，我建议您使用现有的

form

html标记和

input

以及类型

checkbox

。然后，您可以使用css选择器

input:checked

添加所需样式，而无需为每个

span

@amcquaid定义状态和

name

属性。第二种方法不起作用，onClick上没有切换效果。

handleChange(e) {
  alert(`You selected... ${e.target.textContent}`);
  this.setState({
     firstSpanClick: !this.state.firstSpanClick
  });
}

handleChange1(e) {
  alert(`You selected... ${e.target.textContent}`);
  this.setState({
     secondSpanClick: !this.state.secondSpanClick
  });
}

<span onClick={this.handleChange1} className={this.state.firstSpanClick ? "youClicked" : "unClicked"}> Virtual</span>

<span onClick={this.handleChange2} className={this.state.secondSpanClick ? "youClicked" : "unClicked"}> Virtual</span>

//Each toggle variable doesn't need to be initialised, this is just for demonstration.

this.state = {
   spanOne: false,
   spanTwo: false
}

handleChange = (e) => {
        let name = e.target.getAttribute('name');
        this.setState({
            [name]: !this.state[name]
        });
    };

<span onClick={this.handleChange} name={'spanOne'} className={this.state.spanOne ? "youClicked" : "unClicked"}> Virtual</span>

<span onClick={this.handleChange} name={'spanTwo'} className={this.state.spanTwo ? "youClicked" : "unClicked"}> Virtual</span>