Javascript 如何仅将类添加到React中特别单击的元素？

Im在一个对象上循环，显示li标记并附加一个点击处理程序

下面是一个显示更多信息的游戏组件

是否有人可以帮助我了解我的逻辑，以及如何告诉React仅将类添加到与单击相关的特定组件。 在

当前，当我单击一个元素时，以下所有游戏组件将同时打开。我只想打开下面的那个

库组件

 class Library extends React.Component {

  state = {
    active: false
  };

  toggleClass = index => {
    let active = this.state.active;
    active = !active;
    this.setState({ active });
  };

  render() {
    return (
      <section>
        <h2>Game Library</h2>
        <ul>
          {this.props.games.map((game, index) => (
            <Fragment key={`${index}-${game.name}`}>
              <li
                key={`${index}-${game.gameId}`}
                onClick={() => this.toggleClass(index)}
              >
                {game.name}
              </li>
              <Game
                key={index}
                index={index}
                game={this.props.games[index]}
                active={this.state.active}
              />
            </Fragment>
          ))}
        </ul>
      </section>
    );
  }
}

类库扩展了React.Component{
状态={
活动：错误
};
toggleClass=索引=>{
让active=this.state.active；
活动=！活动；
this.setState（{active}）；
};
render（）{
返回(
游戏库

{this.props.games.map（（游戏，索引）=>(
this.toggleClass（索引）}
>
{game.name}

))}

);
}
}

游戏组件

  class Game extends React.Component {
      render() {
        return (
          <div
            key={this.props.index}
            className={this.props.active ? "show" : "hide"}
          >
            <p>{this.props.game.name}</p>
            <p>{this.props.game.gameId}</p>
            <a>Close</a>
          </div>
        );
      }
    }

类游戏扩展React.Component{
render（）{
返回(
{this.props.game.name}

{this.props.game.gameId}

接近
);
}
}

您可以为每个

游戏使用一个带有键的对象，每个
索引都有一个键，指示该特定游戏是否处于活动状态，而不是让布尔
处于活动状态

示例

class Library extends React.Component {
  state = {
    active: {}
  };

  toggleClass = index => {
    this.setState(previousState => {
      const active = { ...previousState.active };
      active[index] = !active[index];
      return { active };
    });
  };

  render() {
    return (
      <section>
        <h2>Game Library</h2>
        <ul>
          {this.props.games.map((game, index) => (
            <Fragment key={`${index}-${game.name}`}>
              <li
                key={`${index}-${game.gameId}`}
                onClick={() => this.toggleClass(index)}
              >
                {game.name}
              </li>
              <Game
                key={index}
                index={index}
                game={game}
                active={this.state.active[index]}
              />
            </Fragment>
          ))}
        </ul>
      </section>
    );
  }
}

类库扩展了React.Component{
状态={
活动：{}
};
toggleClass=索引=>{
this.setState（previousState=>{
const active={…previousState.active}；
活动[索引]=！活动[索引]；
返回{active}；
});
};
render（）{
返回(
游戏库

{this.props.games.map（（游戏，索引）=>(
this.toggleClass（索引）}
>
{game.name}

))}

);
}
}
效果非常好。我仔细分析了你在关注我的州时所做的事情，我意识到这个州随着每个指数的增长而不断增长。每次单击时使用setState并清除上一次单击是否有益？编辑：刚刚意识到这会阻止你关闭上一次点击。@Darren太棒了！是的，
活动的
对象一开始是空的，但如果您单击所有对象，则每个游戏最多只能打开一个键。@Darren您希望一次只打开一个游戏吗？如果你不明白，也许你可以提出一个新问题？