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

状态可以如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;

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

1 个答案: