为多个按钮单独设置非活动状态

Posted 2021-03-29

我在为多个按钮单独设置活动/非活动状态时遇到一些困难。代码工作，除了它设置所有按钮上的状态 - 而不仅仅是单个预期按钮。任何帮助，将不胜感激。谢谢。功能：{handleClickLock}和按钮：{this.handleClickLock（player）}> 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;

答案

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

请看下面的演示：

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      availableTeam: [{name:"A",isLocked:false},
                      {name:"A",isLocked:false},
                      {name:"A",isLocked:false}]
    }
  }
  
  handleClickLock = (key) => {
    let teamToUpdate = this.state.availableTeam;
    this.setState({
      availableTeam: teamToUpdate.map((player, id)=>{
        if(id === key){
          return Object.assign({}, player, {
            isLocked: true
          })
        } else {
          return player;
        }
      })
    })
  }
  
  handleClickUnlock = (key) => {
    let teamToUpdate = this.state.availableTeam;
    this.setState({
      availableTeam: teamToUpdate.map((player, id)=>{
        if(id === key){
          return Object.assign({}, player, {
            isLocked: false
          })
        } else {
          return player;
        }
      })
    })
  }
  render(){
    return (
      <div className="stayLeft">
          <div className="AvailableTeamDiv">
            <h3>Available Team Members</h3>
             {
                this.state.availableTeam.map((player, key) => {
                  return <div key={key}>
                          <button>{player.name}</button>
                          <button disabled={player.isLocked}>Alpha</button>
                          <button disabled={player.isLocked}>Omega</button>
                          <button className="lockBtn" onClick={() => this.handleClickLock(key)}>Lock</button>
                          <button className="lockBtn" onClick={() => this.handleClickUnlock(key)}>Unlock</button>
                        </div>
                })
             }
          </div>
      </div>
    )
  }
}

ReactDOM.render( < App / > , document.getElementById("app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

以上是关于为多个按钮单独设置非活动状态的主要内容，如果未能解决你的问题，请参考以下文章

将多个输出中的hls属性设置为单独的片段代码

Android活动导航保存状态

如何更改 viewpager 中每个片段的点指示器（活动和非活动）的颜色？

我怎么能不一起点击多个按钮？

从单个按钮从多个片段中提取数据

保留活动中的片段状态