Javascript 通过循环中的setState添加类名

如何将

className=“active”

分配给具有

setState

this.state = {clicked: true}
...
{i.rate_plans.map((j,index) => {
  return(
    <div key={index}>
      <h2 onClick= {() => this.setState({clicked: !this.state.clicked})}>{j.name}</h2>
      <div className=${this.state.clicked ? '' : 'active'}>...</div>
    </div>
  )
})}

this.state={clicked:true}
...
{i.rate_plans.map（（j，索引）=>{
返回(
this.setState（{clicked:！this.state.clicked}）}>{j.name}
...
)
})}

---

这会将类添加到循环中的所有项中。如何才能添加到已单击的项目，而不是其他项目？

您可以保留一个对象，用于跟踪所有已单击的

费率计划

示例

class App extends React.Component {
  state = {
    rate_plans: [{ name: "test" }, { name: "test2" }],
    clicked_rate_plans: {}
  };

  onClick = plan => {
    this.setState(previousState => {
      const clicked_rate_plans = { ...previousState.clicked_rate_plans };
      clicked_rate_plans[plan.name] = !clicked_rate_plans[plan.name];
      return { clicked_rate_plans };
    });
  };

  render() {
    return (
      <div>
        {this.state.rate_plans.map((j, index) => {
          return (
            <div key={index}>
              <h2 onClick={() => this.onClick(j)}>
                {j.name} {this.state.clicked_rate_plans[j.name] && " clicked"}
              </h2>
            </div>
          );
        })}
      </div>
    );
  }
}

类应用程序扩展了React.Component{
状态={
费率计划：[{name:“test”}，{name:“test2”}]，
单击{u比率}
};
onClick=plan=>{
this.setState（previousState=>{
const clicked_rate_plans={…previousState.clicked_rate_plans}；
单击计划[计划名称]=！单击计划[计划名称]；
返回{点击率计划}；
});
};
render（）{
返回(
{this.state.rate_plans.map（（j，index）=>{
返回(
这个.onClick（j）}>
{j.name}{this.state.clicked_rate_plans[j.name]&&“clicked”}
);
})}
);
}
}
好的，问题出在这里。您只需使用一个变量来存储单击的元素。如果您只单击一个元素，它会将
active
类添加到所有元素中，因为它们只基于一个变量。您需要做的是创建一个数组，并根据数组中元素的索引存储单击的状态。那就行了。我已经为你创建了一个沙箱。
这是
（）
谢谢@Tholle。我试图集成您的解决方案，但遇到了一些障碍-以下是完整的代码。如果你不介意看一看的话。添加上面的解决方案会产生
undefined
错误。干杯。作为一名学习者，我首先想到添加
checked
属性来对个人进行评分，但使用这种方法，我们不需要改变数据本身，我们可以清楚地看到在我们的状态下，哪些数据是
检查的
。我很喜欢，谢谢，谢谢。按预期工作，现在更有意义。您知道是什么导致了未捕获类型错误：onOutsideClick不是OutsideClickHandler的函数。onMouseUp

？@devserkan很高兴您喜欢它！这是一个非常强大的技术。不用担心-自编辑后出现，但可能在其他地方引起。再次感谢你的帮助。除了我期待的答案之外，我还学到了一些东西。谢谢你在这里花时间和精力。这对其他人来说无疑是一笔财富，但我选择了使用Thole发布的答案。一点问题都没有。你找到了答案，这是最重要的；-）