javascript - react .js : Toggle Buttons with children and parents

Question

我有一个 [Available Team] 数组作为按钮填充在(Available Team Members)下。我希望当单击一个按钮时，它会在(Alpha Team Members)下生成一个与父按钮同名的子按钮。当再次点击同一个 parent 时，我希望将 child 从(Alpha Team Members)中删除。 (Omega 团队成员)是随机生成的。

我的问题是点击处理程序一次完成所有按钮的此功能，而不仅仅是点击的按钮，点击时它会随机生成它不应该做的随机生成的(Omega Team Members)...帮助将不胜感激.提前谢谢你。

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;

我尝试了一种使用 handle 的解决方案，但当使用多个按钮时它们会触发所有按钮。我可以使用 key 修复此问题吗？如果可以，如何修复？

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 组件的状态，这会导致 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;