Question

我有一个[可用团队]数组，在（可用团队成员）下填充为按钮。我希望当单击一个时，它会在（Alpha团队成员）下生成一个父窗口名称相同的子按钮。当再次点击同一个父母时，我希望将孩子从（Alpha团队成员）中删除。（Omega团队成员）是随机生成的。

我的问题是，点击处理程序一次完成所有按钮的这个功能，而不仅仅是点击的按钮，当点击它时，它随机生成（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 } 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;

Answer 1

我希望我理解正确，所以我的解决方案：

您缺少动态显示播放器按钮的逻辑，您只需打开和关闭按钮即可。根据您点击的播放器按钮，您的handleClick功能无法正常工作。

因此你必须将参数传递给handleClick，我建议播放器。然后你需要推动你想要在alphaTeam数组中显示的每个玩家。该数组必须以循环方式显示（大概如果你想在那里显示多个玩家）。

对于shuffle部分，你的handleClick函数设置你的App Component的状态，是什么原因导致React重新渲染App，从而再次改变你的OmegaTeam。您应该考虑在构造函数/状态中移动shuffle以及AvailableTeam的初始化。

这是我的建议，但我没有测试过：

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;

Answer 2

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;

React.js：与孩子和父母切换按钮

2 个答案: