在數組列表中添加和刪除按鈕元素

Question

我正在構建這個虛擬應用程序，您可以從中從團隊成員的數組列表中選擇團隊。 我將所有結果生成為屏幕上的按鈕，以便您可以在團隊中添加和刪除團隊成員，然后從團隊成員中將其撤回原始列表（可用團隊成員）。 此功能應該在（可用團隊成員）和（Alpha團隊成員）之間工作，從而隨機生成（Omega團隊成員）。

我的問題是，我似乎找不到能夠在（可用團隊成員）和（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

可以使用此處顯示的狀態。 因此，嘗試一下：

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;