使用onClick从一个数组中删除项目并放入React中的另一个数组中

Question

我希望能够单击某个元素，然后将其从player1数组中删除并将其放入playCard数组中。当前，它被附加到页面上的按钮上。

choseCard = () => {
    this.setState(({
        playCard,
        player1
    }) => {
        return {
            playCard: [...playCard, ...player1.slice(0, 1)],
            player1: [...player1.slice(1, player1.length)]

        };
    });

}

当前，这从player1数组中获取第一项，并将其放置在playCard数组中。我希望能够从播放器数组中选择某个元素（卡），而不仅仅是采用第一个元素。我还是个初学者，因此我很难思考如何做出反应。

是否有办法将选定的卡移动到第一个元素然后使用上面的代码？

Answer 1

尝试将您单击的元素的索引传递到函数上，这可能可行...

         choseCard = (index) => {
                this.setState(({playCard, player1}) => 
                  {
                    return 
                    {
                        playCard: [...playCard, ...player1.slice(index, 1)],
                        player1: [...player1.slice(0, index),...player1.slice(index,player1.length)]

                    };
                  });
                }

Answer 2

您可以在return语句上方插入所需的任何逻辑，然后返回结果：

choseCard = () => {
    this.setState(({playCard, player1}) => {
        // change `index` to whichever index you want to remove
        const index = 1;
        const toInsert = player1[index];

        const player1Copy = player1.slice();
        player1Copy.splice(index, 1);

        const playCardCopy = playCard.slice();
        playCardCopy.push(toInsert);
    
        return {
            playCard: playCardCopy,
            player1: player1Copy,
        };
    });
}

Answer 3

您可以在choseCard功能中传递卡片对象

choseCard(card) => {
  const {playCard, player1} = this.state;

  return this.setState({
    playCard: playCard.concat(card),
    player1: player1.filter(c => c.id !== card.id)
  });
}

这也是在假设每张卡都有唯一标识符的情况下。