在数组列表中添加和删除按钮元素

Question

我正在构建这个虚拟应用程序，您可以通过该应用程序从一组团队成员列表中选择团队。我将所有结果生成为屏幕上的按钮，以便您可以在团队中添加和删除团队成员，这会将他们从原始列表中取出并放回原始列表（可用团队成员）。此功能应在 (Available Team Members) 和 (Alpha Team Members) 之间工作，其中 (Omega Team Members) 是随机生成的。

我的问题是我似乎找不到适用于在（可用团队成员）和（Alpha 团队成员）之间添加和删除团队成员的解决方案。

我们将不胜感激。提前谢谢你。

import React, { Component } from 'react';
import './App.css';

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

class App extends Component {
    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>{player}</button></div>)}
                </div>

                <div>
                    <h3>Alpha Team Members</h3>
                    {AlphaTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
                </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

状态可以使用如图here。所以试试这个：

import React, { Component } from 'react';
import './App.css';

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

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            AvailableTeam: ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'],
            AlphaTeam: [],
            Omegateam: []
        };
    }

    render() {
        for (let i = 0; i < 3; i++) {
            const playerIndex = Math.floor(Math.random() * this.state.AvailableTeam.length);
            // The state properties should be treated as immutable
            var tempOmega = this.state.OmegaTeam;
            var tempAvailable = this.state.AvailableTeam;

            tempOmega.push(tempAvailable[playerIndex]);
            this.setState({ Omegateam: tempOmega })

            tempAvailable.splice(playerIndex, 1);
            this.setState({ AvailableTeam: tempAvailable })
        }

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

                <div>
                    <h3>Alpha Team Members</h3>
                    {AlphaTeam.map((player, key) => <div key={key}><button>{player}</button></div>)}
                </div>

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

export default App;