0

我正在学习 React 并尝试在应用程序的卡片组件中创建一个记忆游戏应用程序，如果我单击一张卡片，我想将该卡片推送到一个空数组。但是如果我单击第二张卡片，数组不会保存第一张卡片，或者它不会正确保存，因为每次单击新卡片时道具的值都会改变。我检查了一些类似的问题，但他们发布的问题不同。

import React from 'react';
import '../memoryGameStyle/card.css';

class Card extends React.Component{
    constructor(props){
        super(props);
        this.state={card:'' }
    }
    onCardClick=()=>{
        const array=[]
        const newCard={...this.props.card,show:true}
        this.setState({card:newCard})
    }
    render(){...}
}

export default Card

我正在尝试将新卡推送到 onCardClick 中。我有两个道具，一个会显示我点击的卡片，另一个会显示所有卡片的数组。我尝试使用 filter()、push()、spread 运算符，到目前为止都不起作用，我一定做错了什么。请帮忙，谢谢

4

2 回答 2

0

据我了解，您有两个要求：

  • 显示当前点击的卡片。
  • 显示用户过去点击的所有卡片。//Let me know if that's not the case

假设您想做以上 2 件事，您可以执行以下操作： 

state = {
  cards: [],
  showAllClickedCards: true 
}
//"cards" holds the cards clicked by the user
//The most recent clicked card will be at the last in the the array.
//You can toggle "showAllClickedCards" to either show all cards or selected one

现在这是您可以在 onCardClick 中执行的操作

//Assuming the function is being passed the selectedCard
onCardClick = (selectedCard) => {
     //Do something with selected card
     this.setState(prevState => ({
        cards: [...prevState.cards, selectedCard]
     }))
}

注意：要显示当前点击的卡片，您可以执行this.state.cards[this.state.cards.length - 1].
希望这可以帮助

于 2017-12-28T04:48:04.527 回答
0

你在你的状态下写了 card 变量。改为这样做

 constructor(props){
    super(props);
    this.state={card:[] }
}

免责声明：以下解决方案假定 newCard 包含所选卡

onCardClick=()=>{
    const {card} =this.state;
    const newCard= //get selected card
    card.push(newCard);
    this.setState({card:newCard})
}
于 2017-12-28T04:23:51.827 回答