javascript - 在循环中通过setState添加className

Question

如何使用 setState 将 className="active" 分配给循环

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

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

Answer 1

您可以保留一个对象来跟踪所有已被点击的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>
    );
  }
}