javascript - 按钮 ID 问题

Question

我的代码确实有问题。我想要做的是，当我想点击一个按钮时，我希望这个按钮变成“隐藏”（它在开头显示），并显示特定 ID 的信息。我试图用很多例子来做，但其他按钮也改变了这个特定的按钮。然后，我没有发现问题。如果有人可以帮助我。非常感谢。

import React, { Component } from "react";
import "./IlkOnbir.css";

export default class IlkOnbir extends Component {
state = {
    info: false,
    btn: true,
    players: [
    {
        id: 1,
        name: "Altay Bayindir",
        age: "21",
        mevki: "Kaleci",

    },
    {
        id: 2,
        name: "Serdar Aziz",
        age: "29",
        mevki: "Stoper",
    },
    {
        id: 3,
        name: "Simon Falette",
        age: "23",
        mevki: "Stoper",
    },
    {
        id: 4,
        name: "Nabil Dirar",
        age: "33",
        mevki: "Sag Bek",
    },
    {
        id: 5,
        name: "Hasan Ali Kaldirim",
        age: "32",
        mevki: "Sol Bek",
    },
    {
        id: 6,
        name: "Emre Belözoglu",
        age: "37",
        mevki: "Orta Saha",
    },
    {
        id: 7,
        name: "Luiz Gustavo",
        age: "32",
        mevki: "Orta Saha",
    },
    {
        id: 8,
        name: "Ozan Tufan",
        age: "25",
        mevki: "Orta Saha",
    },
    {
        id: 9,
        name: "Deniz Türüç",
        age: "28",
        mevki: "Orta Saha",
    },
    {
        id: 10,
        name: "Gary Rodriguez",
        age: "29",
        mevki: "Kanat",
    },
    {
        id: 11,
        name: "Tolga Cigerci",
        age: "29",
        mevki: "Orta Saha",
    },
    {
        id: 12,
        name: "Ferdi",
        age: "21",
        mevki: "Stoper",
    },
    {
        id: 13,
        name: "Mevlüt",
        age: "33",
        mevki: "Stoper",
    },
    {
        id: 14,
        name: "Vedat",
        age: "26",
        mevki: "Stoper",
    },
 ],
}

showInfo = (i) => {
    this.setState({ info: !this.state.info});
}

handleClick = event => {
    event.currentTarget.classList.toggle('active');
}

btnDisplay = (e) => {    
    console.log(e.currentTarget.id);

    this.setState({info: !this.state.info, btn:!this.state.btn});
}

render() {
    const hideInfo = this.state.info;

    const pl = this.state.players.map((player,i) => {
       return (
          <div key={i} className="card--content movie" onClick={this.handleClick}>
          <div className="content">
               <img src={player.source} alt="" />

               <div class="buttons">
                    <p
            onClick={() => this.showInfo(player[i])} key={player[i]} className="btn effect04 movie" data-sm-link-text="INFO"><span>{this.state.btn === true ? "SHOW" : "HIDE"}</span>
                   </p>
              {hideInfo === true ? (
                 <div className="opening">
                    <p>{player.name}</p>
                    <p>{player.age} </p>
                    <p>{player.mevki} </p>
                 </div>
              ) : (
                ""
              )}
         </div>
      </div>
   </div>
    
  )})


return (
  <div className="container">
    <section className="card">
    {pl}
    </section>
  </div>
)}}

标签： javascripthtmlreactjsbuttonternary

Answer 1

每个玩家都需要自己的 info 属性；现在信息适用于所有这些。

请参阅工作示例： https ://codesandbox.io/s/sweet-jang-m3yfe?file=/src/App.js

{
      id: 1,
      name: "Altay Bayindir",
      age: "21",
      mevki: "Kaleci",
      info: false
}

showInfo = i => {
    this.setState(state => ({
      ...state,
      players: state.players.map((player, index) =>
        index === i ? { ...player, info: !player.info } : player
      )
    }));
};

 onClick={() => this.showInfo(i)}

 {player.info && (
       <div className="opening">
           <p>{player.name}</p>
           <p>{player.age} </p>
           <p>{player.mevki} </p>
       </div>
)}