Javascript 反应-切换css类

我希望能够在列表的单个项目上切换类“活动”的开/关。假设我们有一个元素列表：

<ul>
  <li><a href="#" className="list-item">First</a></li>
  <li><a href="#" className="list-item">Second</a></li>
  <li><a href="#" className="list-item">Third</a></li>
</ul>

我希望能够在单击第二个元素时添加类“active”。我不能使用state，因为如果我们在那里添加条件，它会改变其他2个元素的类，对吗

因此，解决方案可以是创建一个子组件，比如说

，它可以有自己的状态和自己的onclick方法，只改变自己的类。但是，当我们想要在单击时删除其他元素上的类“active”时，这个子组件必须将方法分派给父元素，以便从其他元素中删除类。对于一个简单的任务来说，这似乎相当复杂（你知道jquery中的10秒）

有谁有更简单的解决方案吗

---

如果不必为此使用另一个大型npm模块document.getElementsByClassName（显然）或refs，那就太好了

解决此问题的正确方法是使用一个状态变量来定义当前处于“活动”状态的变量，即

然后，可以使用内联if语句，如下所示：

<li><a href="#" className={"list-item" + (this.state.active == "first" ? " active": "")}>First</a></li>

---

请注意，我假设您希望对这些列表元素进行硬编码-如果这些元素是动态生成的，只需将

this.state.active

设置为当前选定元素的索引/引用即可

解决此问题的正确方法是使用一个状态变量来定义当前处于“活动”状态的变量，即

然后，可以使用内联if语句，如下所示：

<li><a href="#" className={"list-item" + (this.state.active == "first" ? " active": "")}>First</a></li>

---

请注意，我假设您希望对这些列表元素进行硬编码-如果这些元素是动态生成的，只需将

this.state.active

设置为当前选定元素的索引/引用即可

您可以在

项目

组件之外管理所选状态，并将其作为道具传递。

onSelect

/

onClick

的事件处理程序可以触发并更改

状态


const data=[1,2,3,4,5]；
类列表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
selectedItem:0
};
this.onSelect=this.onSelect.bind（this）；
}
onSelect（id）{
这是我的国家({
selectedItem:id
});
}
render（）{
const{selectedItem}=this.state；
报税表（

{data.map（（d，索引）=>{
返回
})}

)
}
}
常量列表项=（道具）=>{
const onSelect=（e）=>{
props.onSelect（例如target.id）；
}
const className=props.selected&“selected”；
返回
{props.value}
}
render（，document.getElementById（“根”））
ul{
列表样式：无；
}
李{
填充物：5px；
边框：1px实心#ccc；
光标：指针；
}
李先生当选{
背景颜色：绿色；
颜色：#fff；
}
您可以在
项目
组件之外管理所选状态，并将其作为道具传递。

onSelect
/
onClick
的事件处理程序可以触发并更改
状态


const data=[1,2,3,4,5]；
类列表扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
selectedItem:0
};
this.onSelect=this.onSelect.bind（this）；
}
onSelect（id）{
这是我的国家({
selectedItem:id
});
}
render（）{
const{selectedItem}=this.state；
报税表（

{data.map（（d，索引）=>{
返回
})}

)
}
}
常量列表项=（道具）=>{
const onSelect=（e）=>{
props.onSelect（例如target.id）；
}
const className=props.selected&“selected”；
返回
{props.value}
}
render（，document.getElementById（“根”））
ul{
列表样式：无；
}
李{
填充物：5px；
边框：1px实心#ccc；
光标：指针；
}
李先生当选{
背景颜色：绿色；
颜色：#fff；
}

在此处使用状态有什么问题
因为它会改变其他2个元素的类
这是什么意思？你不会让他们都在状态改变时改变。即使他们这样做了，这也不会是一个性能问题。不确定问题是什么。在这里使用状态有什么问题
因为它会改变其他2个元素的类
这是什么意思？你不会让他们都在状态改变时改变。即使他们这样做了，这也不会是一个性能问题。不知道问题出在哪里。