时间戳

首页 > 解决方案 > 如何仅将类添加到 React 中特定单击的元素？

javascript - 如何仅将类添加到 React 中特定单击的元素？

问题描述

我循环一个对象并显示 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>
    );
  }
}

游戏组件

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

标签： javascriptreactjs

解决方案

active除了为 each 使用布尔值game外，您还可以为 each 使用一个带有一个键的对象，以index指示该特定游戏是否处于活动状态。

例子

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

推荐阅读