使用另一个按钮禁用/启用按钮

Question

我正在构建一个应用程序，它可以使用按钮选择器生成团队。初始队伍是（可用队伍），有两个按钮；球员姓名按钮将球员姓名填充到（阿尔法队），踢球按钮将球员姓名填充到（替补队）。

我想做的是，当按下玩家姓名按钮时，它应该禁用踢球按钮；当按下踢球按钮时，它应该禁用玩家姓名按钮。

我尝试了不同的方法，但还没有接近解决方案。 如有帮助，我们将不胜感激。

import React, { Component } from 'react';
import './App.css';

const green = '#39D1B4';
const yellow = '#FFD712';

class App extends Component {

  constructor() {
    super();

    let availableTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];
    let alphaTeam = [];
    let omegaTeam = [];
    let benchTeam = [];
    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * availableTeam.length);
      omegaTeam.push(availableTeam[playerIndex]);
      availableTeam.splice(playerIndex, 1);
    }
    this.state = {
     availableTeam : availableTeam,
     alphaTeam : [],
     omegaTeam : omegaTeam,
     benchTeam : []
    };
  }


  handleClick(player) {
    let newAlphaTeam = this.state.alphaTeam;
    // if player is not in array , add him
    if(newAlphaTeam.indexOf(player)<0){
        newAlphaTeam.push(player);
    }
    // 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,
    });
  }

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

  render() {

    return (
      <div className="App">
        <div>
          <h3>On the Bench</h3>
          {this.state.benchTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
        </div>
        <div>
          <h3>Available Team Members</h3>
          {this.state.availableTeam.map((player, key) => <div key={key}><button onClick={() => this.handleClick(player)}>{player}</button><button onClick={() => this.handleClickBench(player)}>Kick</button></div>)}
        </div>

        <div>
          <h3>Alpha Team Members</h3>
          {this.state.alphaTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
        </div>

        <div>
          <h3>Omega Team Members</h3>
          {this.state.omegaTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

您可以根据玩家是否已在状态数组中来禁用该按钮。

示例：

球员在替补阵容中。您想要禁用踢球按钮：

// Kick button
<div key={key}>
    <button disabled={this.state.benchTeam.indexOf(player) !== -1}>Kick</button>
</div>

玩家在 alphaTeam 中。您想禁用玩家姓名按钮。

// Player button
<div key={key}>
    <button disabled={this.state.alphaTeam.indexOf(player) !== -1}>{player}</button>
</div>

Answer 2

检查以下内容是否符合您的要求。我采用了两个布尔状态变量。当您按下播放器按钮时，将 kickButtonDisabled 更改为 true，就像您按下踢球按钮时，在处理程序函数中将 playerNameButtonDisabled 更改为 true 一样。最后将状态添加到按钮禁用属性。

this.state = {
   playerNameButtonDisabled: false,
   kickButtonDisabled: false
}

handleClick(player) {
    let newAlphaTeam = this.state.alphaTeam;
    // if player is not in array , add him
    if(newAlphaTeam.indexOf(player)<0){
        newAlphaTeam.push(player);

        //disable kick button
        this.setState({
          kickButtonDisabled: true,
          playerNameButtonDisabled: false
        })

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

handleClickBench(player) {
    let newBenchTeam = this.state.benchTeam;
    // if player is not in array , add him
    if(newBenchTeam.indexOf(player)<0){
        newBenchTeam.push(player);

        //Disable player name button
        this.setState({
          playerNameButtonDisabled: true,
          kickButtonDisabled: false
        });

    }
    // if player is in the array , remove him
    else{
      newBenchTeam.splice(newBenchTeam.indexOf(player), 1);
    }
    //setState to rerender the App component
    this.setState({
      benchTeam : newBenchTeam,
    });
  }

<button disabled={this.state.playerNameButtonDisabled} onClick={() => this.handleClick(player)}>{player}</button>
<button disabled={this.state.kickButtonDisabled} onClick={() => this.handleClickBench(player)}>Kick</button>