Question

如何使用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>
  )
})}

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

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

Answer 2

好，这是问题所在。您仅使用一个变量来存储单击哪个元素。而且，即使您只单击一个元素，也会将active类添加到所有元素，因为它们仅基于一个变量。您要做的是拥有一个数组，并根据数组中元素的索引存储单击状态。这样就可以了。我为您创建了一个沙箱。这是 （CodeSandbox）

通过setState在循环中添加className

2 个答案: