代码之家 › 专栏 › 技术社区 › Darren

通过循环中的setState添加类名

reactjs javascript

Darren · 技术社区 · 6 年前

如何分配 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>
  )
})}

这会将类添加到循环中的所有项。如何添加到已单击的项,而不是其他项?

2 回复 | 直到 6 年前

Tholle 6 年前

你可以保留一个跟踪你所有 rate_plans 已经点击了。

例子

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>
    );
  }
}