Reactjs 为多个按钮分别设置非活动状态

我在为多个按钮单独设置活动/非活动状态时遇到一些困难。除了设置所有按钮的状态外，该代码可以正常工作，而不仅仅是单个预期按钮。任何帮助都将不胜感激。非常感谢。函数：{handleClickLock}和按钮：{this.handleClickLockplayer}>Lock}

import React, { Component } from 'react';
import './App.css';
import bomb from './bomb.svg';
import crosshair from './crosshair.svg';
import gun from './gun.svg';
import kirpan from './kirpan.svg';
import shield from './shield.svg';
import bomb2 from './bomb2.svg';
import crosshair2 from './crosshair2.svg';
import gun2 from './gun2.svg';
import kirpan2 from './kirpan2.svg';
import shield2 from './shield2.svg';
import kick from './kick.svg';
import add from './add.svg';
import videoURL from './videoplayback.mp4';

class App extends Component {

  constructor() {
    super();

    let availableTeam = [<img src={bomb} alt="bomb"></img>, <img src={crosshair} alt="crosshair"></img>, <img src={gun} alt="gun"></img>, <img src={kirpan} alt="kirpan"></img>, <img src={shield} alt="shield"></img>, <img src={bomb2} alt="bomb2"></img>, <img src={crosshair2} alt="crosshair2"></img>, <img src={gun2} alt="gun2"></img>, <img src={kirpan2} alt="kirpan2"></img>, <img src={shield2} alt="shield2"></img>];
    let alphaTeam = [];
    let omegaTeam = [];
    let benchTeam = [];
    let omegaBenchTeam = [];
    this.state = {
     availableTeam : availableTeam,
     alphaTeam : [],
     omegaTeam : [],
     benchTeam : [],
     omegaBenchTeam : [],
     disabled : false
    }
    this.handleClickLock = this.handleClickLock.bind(this);
  }

  handleClickLock(player, key){
    let disabled = this.state.disabled;
    let availableTeam = this.state.availableTeam;
    if(disabled){
      this.setState({
        disabled : false,
      });
    } else {
      this.setState({
        disabled : true,
      });
    }
  }

  handleClickAlphaTeam(){
    let newAlphaTeam = this.state.alphaTeam;
    let availableTeam = this.state.availableTeam;
    let alphaTeam = this.state.alphaTeam;
    if(availableTeam.length >= 5){
      for (let i = 0; i < 5; i++) {
        const playerIndex = Math.floor(Math.random() * availableTeam.length);
        alphaTeam.push(availableTeam[playerIndex]);
        availableTeam.splice(playerIndex, 1);
      }
    }
    this.setState({
      alphaTeam : newAlphaTeam
    });
  };

  handleClickOmegaTeam(){
    let availableTeam = this.state.availableTeam;
    let newOmegaTeam = this.state.omegaTeam;
    let omegaTeam = this.state.omegaTeam;
    if(availableTeam.length >= 5){
      for (let i = 0; i < 5; i++) {
        const playerIndex = Math.floor(Math.random() * availableTeam.length);
        omegaTeam.push(availableTeam[playerIndex]);
        availableTeam.splice(playerIndex, 1);
      }
    }
    this.setState({
      omegaTeam : newOmegaTeam,
    });
  };

  handleClickToAlpha(player) {
    let newAlphaTeam = this.state.alphaTeam;
    let availableTeam = this.state.availableTeam;
    // if player is not in array , add him
    if(newAlphaTeam.indexOf(player)<0){
        newAlphaTeam.push(player);
        availableTeam.splice(availableTeam.indexOf(player), 1);
    }
    // if player is in the array , remove him
    else{
      newAlphaTeam.splice(newAlphaTeam.indexOf(player), 1);
    }
    //setState to rerender the App component
    this.setState({
      alphaTeam : newAlphaTeam,
    });
  }

  handleClickToOmega(player) {
    let newOmegaTeam = this.state.omegaTeam;
    let availableTeam = this.state.availableTeam;
    // if player is not in array , add him
    if(newOmegaTeam.indexOf(player)<0){
        newOmegaTeam.push(player);
        availableTeam.splice(availableTeam.indexOf(player), 1);
    }
    // if player is in the array , remove him
    else{
      newOmegaTeam.splice(newOmegaTeam.indexOf(player), 1);
    }
    //setState to rerender the App component
    this.setState({
      OmegaTeam : newOmegaTeam,
    });
  }

  handleClickAvailableAlpha(player) {
    let newAlphaTeam = this.state.alphaTeam;
    let newAvailableTeam = this.state.availableTeam;
    // if player is not in array , add him
    if(newAvailableTeam.indexOf(player)<0){
        newAvailableTeam.push(player);
        newAlphaTeam.splice(newAlphaTeam.indexOf(player), 1);
    }
    // if player is in the array , remove him
    else{
      newAvailableTeam.splice(newAvailableTeam.indexOf(player), 1);
    }
    //setState to rerender the App component
    this.setState({
      alphaTeam : newAlphaTeam,
    });
  }

  handleClickAvailableOmega(player) {
    let newOmegaTeam = this.state.omegaTeam;
    let newAvailableTeam = this.state.availableTeam;
    // if player is not in array , add him
    if(newAvailableTeam.indexOf(player)<0){
        newAvailableTeam.push(player);
        newOmegaTeam.splice(newOmegaTeam.indexOf(player), 1);
    }
    // if player is in the array , remove him
    else{
      newAvailableTeam.splice(newAvailableTeam.indexOf(player), 1);
    }
    //setState to rerender the App component
    this.setState({
      omegaTeam : newOmegaTeam,
    });
  }

  render() {
    return (
      <div className="App">

        <h1>Airsoft Championships Selection</h1>

        <div className="stayLeft">
          <div className="AvailableTeamDiv">
            <h3>Available Team Members</h3><br/>
            <button onClick={() => this.handleClickAlphaTeam()}>Generate Alpha Team</button>
            <button onClick={() => this.handleClickOmegaTeam()}>Generate Omega Team</button>
            {this.state.availableTeam.map((player, key) => <div key={key}><button>{player}</button><button disabled={this.state.disabled} className="goldBtn" onClick={() => this.handleClickToAlpha(player)}>Alpha</button><button disabled={this.state.disabled} className="redBtn" onClick={() => this.handleClickToOmega(player)}>Omega</button><button className="lockBtn" onClick={() => this.handleClickLock(player)}>Lock</button></div>)}
          </div>
        </div>

        <div className="stayMid">
          <div className="AlphaTeamMembers">
            <h3 className="AlphaH3">Alpha Team Members</h3>
            {this.state.alphaTeam.map((player, key) => <div key={key}><button className="AlphaTeamBtn">{player}</button><button className="kickBtn" onClick={() => this.handleClickAvailableAlpha(player)}><img src={kick} alt="kick"></img></button></div>)}
          </div>
        </div>

        <div className="stayRight">
          <div className="OmegaTeamMembers">
            <h3 className="OmegaH3">Omega Team Members</h3>
            {this.state.omegaTeam.map((player, key) => <div key={key}><button className="OmegaTeamBtn">{player}</button><button className="kickBtn" onClick={() => this.handleClickAvailableOmega(player)}><img src={kick} alt="kick"></img></button></div>)}
          </div>
        </div>
      </div>
    );
  }
}

export default App;

您可以将密钥保存在状态中，并通过执行适当的状态管理来使用它启用/禁用按钮

请看下面的演示：

类应用程序扩展了React.Component{ 构造器{ 超级作物 此.state={ availableTeam:[{name:A，isLocked:false}， {name:A，isLocked:false}， {name:A，isLocked:false}] } } handleClickLock=钥匙=>{ 让teamToUpdate=this.state.availabletem； 这是我的国家{ availableTeam:teamToUpdate.mapplayer，id=>{ ifid==键{ 返回对象。分配{}，玩家{ isLocked：对 } }否则{ 返回球员； } } } } handleClickUnlock=钥匙=>{ 让teamToUpdate=this.state.availabletem； 这是我的国家{ availableTeam:teamToUpdate.mapplayer，id=>{ ifid==键{ 返回对象。分配{}，玩家{ isLocked:false } }否则{ 返回球员； } } } } 渲染{ 回来 可用的团队成员 { this.state.availabletaam.mapplayer，键=>{ 回来 {player.name} 阿尔法 欧米茄 这个.handleClickLockkey}>Lock 此.handleClickUnlockkey}>Unlock } } } } ReactDOM.render，document.getElementByIdapp

---

您要禁用哪个按钮？”lockBtn'或'goldBtn'或'redBtn'锁定BTN应不可用/禁用@DevBrilliant的红色和金色按钮！非常感谢@Dev！嘿，戴夫，我唯一的问题是，当点击另一个按钮时，该按钮无法保持其状态。它不允许多个按钮处于非活动状态。有什么想法吗？谢谢again@RuanPetersen，我已经更新了演示。对于这些，您必须修改数据结构。请看一下更新后的code.Genius。非常感谢您的帮助和时间！嘿@Dev，我只是想知道是否可以使用handleClickLock函数将玩家从handleClickAlphaTeam和handleClickOmegaTeam的随机选择函数中移除，但同时仍将其显示在AvailableTaam数组中。我试过几件事，但都没用。我正在考虑将使用handleClickLock函数锁定的玩家移动到另一个数组中-这在handleClickLock函数中是否有效？非常感谢。