Javascript React.js：使用子级和父级切换按钮

我有一个[Available Team]数组，作为按钮填充在（Available Team Members）下。我希望当一个按钮被点击时，它会在（Alpha团队成员）下生成一个与父按钮同名的子按钮。当再次单击同一父对象时，我希望将该子对象从（Alpha团队成员）中删除。（欧米茄团队成员）是随机生成的

我的问题是，单击处理程序一次完成所有按钮的此功能，而不仅仅是单击的按钮，当单击时，它会洗牌随机生成的（Omega团队成员），这是它不应该做的。。。我们将不胜感激。先谢谢你

import React, { Component } from 'react';
import './App.css';
import ToggleDisplay from 'react-toggle-display';

class App extends Component {

  constructor() {
    super();
    this.state = { show: false };
  }

  handleClick() {
    this.setState({
      show: !this.state.show
    });
  }

  render() {
    const AvailableTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];
    const AlphaTeam = [];
    const OmegaTeam = [];

    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * AvailableTeam.length);
      OmegaTeam.push(AvailableTeam[playerIndex]);
      AvailableTeam.splice(playerIndex, 1);
    }

    return (
      <div className="App">
        <div>
          <h3>Available Team Members</h3>
          {AvailableTeam.map((player, key) => <div key={key}><button onClick={ () => this.handleClick() }>{player}</button></div>)}
          <button onClick={ () => this.handleClick() }>Benzo Walli</button>
        </div>

        <div>
          <h3>Alpha Team Members</h3>
          <ToggleDisplay show={this.state.show}>
            <div><button></button></div>
          </ToggleDisplay>
        </div>

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

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“反应切换显示”导入切换显示；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={show:false}；
}
handleClick（）{
这是我的国家({
show:！this.state.show
});
}
render（）{
可用常数=['Benzo Walli'，'Rasha Loa'，'Tayshaun Dasmoto'，'Colmar Cumberbatch'，'Femi Billon'，'Ziya Erika'，'Siyabonga Nesta'，'Sylvain Natalie'，'Dipak Iunia'，'Danel Mio']；
常量AlphaTeam=[]；
常数OmegaTeam=[]；
for（设i=0；i<3；i++）{
const playerIndex=Math.floor（Math.random（）*availabletem.length）；
OmegaTeam.push（可用的eam[playerIndex]）；
可用的调幅拼接（playerIndex，1）；
}
返回(
可用的团队成员
{availabletem.map（（player，key）=>this.handleClick（）}>{player}）
this.handleClick（）}>Benzo-Walli
阿尔法团队成员
欧米茄团队成员
{OmegaTeam.map（（播放器，键）=>{player}）
);
}
}
导出默认应用程序；

我尝试过使用手柄的解决方案，但当使用多个手柄时，手柄会触发所有按钮。我可以用钥匙来解决这个问题吗？如果可以，怎么解决

import React, { Component } from 'react';
import './App.css';
import ToggleDisplay from 'react-toggle-display';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  handleClick() {
    this.setState({
      show: !this.state.show
    });
  }

  render() {
    const AvailableTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];
    const AlphaTeam = [];
    const OmegaTeam = [];

    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * AvailableTeam.length);
      OmegaTeam.push(AvailableTeam[playerIndex]);
      AvailableTeam.splice(playerIndex, 1);
    }

    return (
      <div className="App">
        <div>
          <h3>Available Team Members</h3>
          <button onClick={ () => this.handleClick() }>Benzo Walli</button>
          <button onClick={ () => this.handleClick() }>Ruan</button>
        </div>

        <div>
          <h3>Alpha Team Members</h3>
          <ToggleDisplay show={this.state.show}>
            <div><button>Benzo Walli</button></div>
          </ToggleDisplay>
          <ToggleDisplay show={this.state.show}>
            <div><button>Ruan</button></div>
          </ToggleDisplay>
        </div>

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

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“反应切换显示”导入切换显示；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={show:false}；
}
handleClick（）{
这是我的国家({
show:！this.state.show
});
}
render（）{
可用常数=['Benzo Walli'，'Rasha Loa'，'Tayshaun Dasmoto'，'Colmar Cumberbatch'，'Femi Billon'，'Ziya Erika'，'Siyabonga Nesta'，'Sylvain Natalie'，'Dipak Iunia'，'Danel Mio']；
常量AlphaTeam=[]；
常数OmegaTeam=[]；
for（设i=0；i<3；i++）{
const playerIndex=Math.floor（Math.random（）*availabletem.length）；
OmegaTeam.push（可用的eam[playerIndex]）；
可用的调幅拼接（playerIndex，1）；
}
返回(
可用的团队成员
this.handleClick（）}>Benzo-Walli
this.handleClick（）}>Ruan
阿尔法团队成员
苯并沃利
阮
欧米茄团队成员
{OmegaTeam.map（（播放器，键）=>{player}）
);
}
}
导出默认应用程序；

我希望我正确地理解了您的意思，因此我的解决方案如下：

缺少动态显示播放器按钮的逻辑，只需打开和关闭按钮。根据您单击的播放器按钮，handleClick功能的工作方式不会有所不同

因此，我建议玩家必须将参数传递给handleClick。 然后你需要推送你想要在你的alphaTeam数组中显示的每个玩家。 该阵列也必须在循环中显示（如果您想在其中显示多个玩家，可能需要这样做）

对于shuffle部分，handleClick函数设置应用程序组件的状态，是什么导致React重新启动应用程序，从而再次洗牌OmegaTeam。您应该考虑在Stucor /状态中移动Stuffle以及IsababLeTeAM的初始化。 这里是我的建议，但我没有测试它：

import React, { Component } from 'react';
import './App.css';
import ToggleDisplay from 'react-toggle-display';

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

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

  render() {

    return (
      <div className="App">
        <div>
          <h3>Available Team Members</h3>
          {this.state.availableTeam.map((player, key) => <div key={key}><button onClick={ () => this.handleClick(player) }>{player}</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;

import React，{Component}来自'React'；
导入“/App.css”；
从“反应切换显示”导入切换显示；
类应用程序扩展组件{
构造函数（）{
超级（）；
let AvailableTam=['Benzo Walli'，'Rasha Loa'，'Tayshaun Dasmoto'，'Colmar Cumberbatch'，'Femi Billon'，'Ziya Erika'，'Siyabonga Nesta'，'Sylvain Natalie'，'Dipak Iunia'，'Danel Mio']；
设omegaTeam=[]；
for（设i=0；i<3；i++）{
const playerIndex=Math.floor（Math.random（）*availabletem.length）；
omegaTeam.push（可用的eam[playerIndex]）；
可用的调幅拼接（playerIndex，1）；
}
此.state={
availableTeam:availableTeam，
alphaTeam:[]，
omegaTeam:omegaTeam，
};
}
手舔（运动员）{
让newAlphaTeam=this.state.alphaTeam；
//如果玩家不在阵型中，添加他
if（newAlphaTeam.indexOf（player this.handleClick（player）}>{player}
阿尔法团队成员
{this.state.alphaTeam.map（（player，key）=>{player}}
欧米茄团队成员
{this.state.omegaTeam.map（（player，key）=>{player}}
);
}
}
导出默认应用程序；

从“React”导入React，{Component}；
导入“/App.css”；
从“反应切换显示”导入切换显示；
常量绿色=#39D1B4'；
常量黄色='#FFD712'；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={color:green}；
this.changeColor=this.changeColor.bind（this）；
let AvailableTam=['Benzo Walli'，'Rasha Loa'，'Tayshaun Dasmoto'，'Colmar Cumberbatch'，'Femi Billon'，'Ziya Erika'，'Siyabonga Nesta'，'Sylvain Natalie'，'Dipak Iunia'，'Danel Mio']；
让alphaTeam=[]；
设omegaTeam=[]；
for（设i=0；i<3；i++）{
const playerIndex=Math.floor（Math.random（）*availabletem.length）；
欧米茄
import React, { Component } from 'react';
import './App.css';
import ToggleDisplay from 'react-toggle-display';

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

class App extends Component {

  constructor() {
    super();
    this.state = {color: green};
    this.changeColor = this.changeColor.bind(this);

    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 = [];
    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,
    };
  }

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

  changeColor(){
    const newColor = this.state.color === green ? yellow : green;
    this.setState({ color: newColor });
  }

  render() {

    return (
      <div className="App">
        <div>
          <h3>Available Team Members</h3>
          {this.state.availableTeam.map((player, key) => <div key={key}><button style={{background: this.state.color}} onClick={this.changeColor, () => this.handleClick(player) }>{player}</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;