React团队选择应用：实现按钮互斥禁用功能求助

嘿，我明白你想要实现的功能——点击玩家按钮加入Alpha团队时，对应的Kick按钮要禁用；点击Kick按钮把玩家移去Bench团队时，玩家按钮也要禁用。咱们一步步来解决这个问题：

问题根源 #

你当前的状态只记录了各个团队的成员列表，但没有在渲染时根据玩家所在的团队来判断按钮是否该禁用。另外，直接修改state里的原数组（比如newAlphaTeam.push(player)）是不符合React状态不可变原则的，可能会导致状态更新不及时或者意外的渲染问题。

解决方案步骤 #

1. 修正状态更新方式：使用React的setState回调函数来更新状态，确保基于最新的状态进行修改，而不是直接操作原数组。
2. 添加按钮禁用逻辑：在渲染Available Team的按钮时，根据玩家是否已经在Alpha或Bench团队里，设置对应的disabled属性。

修改后的完整代码 #

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 omegaTeam = [];
    
    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) {
    // 使用setState的回调函数，基于前一次的状态更新
    this.setState(prevState => {
      const newAlphaTeam = [...prevState.alphaTeam];
      const playerIndex = newAlphaTeam.indexOf(player);
      
      if (playerIndex === -1) {
        newAlphaTeam.push(player);
      } else {
        newAlphaTeam.splice(playerIndex, 1);
      }
      
      return { alphaTeam: newAlphaTeam };
    });
  }

  handleClickBench(player) {
    this.setState(prevState => {
      const newBenchTeam = [...prevState.benchTeam];
      const playerIndex = newBenchTeam.indexOf(player);
      
      if (playerIndex === -1) {
        newBenchTeam.push(player);
      } else {
        newBenchTeam.splice(playerIndex, 1);
      }
      
      return { 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}>
              {/* 如果玩家已经在Bench团队，禁用加入Alpha的按钮 */}
              <button 
                onClick={() => this.handleClick(player)}
                disabled={this.state.benchTeam.includes(player)}
              >
                {player}
              </button>
              {/* 如果玩家已经在Alpha团队，禁用Kick按钮 */}
              <button 
                onClick={() => this.handleClickBench(player)}
                disabled={this.state.alphaTeam.includes(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;

关键说明 #

• 状态不可变：通过扩展运算符[...prevState.alphaTeam]创建数组的副本，再进行修改，确保React能检测到状态变化并触发重新渲染。
• 禁用逻辑：利用数组的includes方法快速判断玩家是否在目标团队里，动态设置按钮的disabled属性，实现互斥禁用的效果。

这样修改后，你想要的功能就可以正常工作啦～

内容的提问来源于stack exchange，提问作者Ruan Petersen