切换单击映射数据 React JS

Question

这是我的主要组件，我在其中根据从 API 收到的数据渲染组件：

  <div className="PlayersContainer">
          {players.map((player) => {
            return (
              <PlayerPhoto
                key={player._id}
                {...player}
                selected={selected}
                something={(e) => {
                  setSelected(!selected);
                 }}
              />
            );
          })}
        </div>

这是我的组件内部：导出默认函数 PlayerPhoto({ name, img, something, selected }) {

  return (
    <article
      className={selected ? styles.Fade : styles.PlayerBox}
      onClick={something}
    >
      <img src={img} alt={name} className={styles.PlayerPhoto} />
      <p className={styles.PlayerName}>{name}</p>
    </article>
  );
}

我想做的是，当用户点击播放器时，它应该淡入淡出 class 并变成淡入淡出，当用户再次点击时，它应该 returns 到它的正常 class.

问题是当用户点击一个玩家时，所有玩家都会淡入淡出 class 并被选中。我如何获得他们的 ID 并将淡入淡出 class 添加到该特定玩家 ID？

Answer 1

你为什么不把这个逻辑移到 PlayerPhoto？

export default function PlayerPhoto({ name, img }) {
  const [selected, setSelected] = React.useState(false);
  return (
    <article
      className={selected ? styles.Fade : styles.PlayerBox}
      onClick={()=>setSelected((prevValue)=>!prevValue}
    >
      <img src={img} alt={name} className={styles.PlayerPhoto} />
      <p className={styles.PlayerName}>{name}</p>
    </article>
  );
}

Answer 2

创建一个状态来维护选定的 id，然后比较 selectedId 和 selected 道具布尔值的玩家 id。如果 id 匹配，它将更改 className。

const [selectedId, setSelectedId] = useState(null);

<div className="PlayersContainer">
  {players.map((player) => {
    return (
      <PlayerPhoto
        key={player._id}
        {...player}
        selected={player._id === selectedId}
        something={() => setSelected(player._id)}
      />
    );
  })}
</div>;

切换单击映射数据 React JS

Toggle click on a mapped data React JS

toggle

reactjs