Question

我正在构建一个使用按钮选择器生成团队的应用程序。最初的团队是（可用团队），有两个按钮;将玩家名称填充到（alpha团队）的玩家姓名按钮，以及将玩家姓名填充到（替补队伍）的踢球按钮。

我想要做的是当按下播放器名称按钮时它应该禁用踢按钮;当按下踢按钮时，它应该禁用播放器名称按钮。

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

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>

希望这有助于您的要求。

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

2 个答案: