比较特定子div与父状态数据

Question

我想做一个卡鲁塔风格的纸牌匹配游戏。随机选择一张卡片并显示在页面顶部。所有其他卡片显示在下面。这些卡是从带有"id"（数字）、"前"（字符串）、"后"（字符串）的JSON中提取的。

预期结果：

• 单击下卡片。
• 如果下卡的id（？）==较高卡的id，得分，生成新的购物车。

不过，我不知道如何比较这两者。如何从子组件获取信息以与父组件状态进行比较？我不确定如何使用handleComparison（）函数在此处找到特定单击div的“x”。

//if（this.props.card[x]. id==this.props.current卡[0]. id）{-

import React from "react"
import Header from "./Header"
import { cardData } from "../Cards";


class GameContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: cardData,
      score: 0,
      currentCard: [{}],
    }
  }

  componentDidMount = (e) => {
    const random = Math.floor(Math.random() * cardData.length);
    this.setState({
      currentCard: [cardData[random]]
    })
  }

  handleComparison = (e) => {
    //if (this.props.card[x].id == this.props.currentCard[0].id) -> {score++ - > gen new card}
      console.log('success');
  }

  render() {
    return (
      <div className="wrapper">
        <Header score={this.state.score} />
        <div className="currentCard"  >
          <p>{this.state.currentCard[0].front}</p>
        </div>
        <CardContainer cards={this.state.cards} handleComp={this.handleComparison}/>
      </div>
    )
  }
}

class CardContainer extends React.Component {

    render() {
        return (
            <div id="CardContainer" className="cardContainer">

                {this.props.cards.map((cards, index) => (
                    <div id="card" className="card" onClick={this.props.handleComp}>
                        <p key={index}>{cards.back}</p>
                    </div>
                ))}
                
            </div>);
    }
}
export default GameContainer

Answer 1

你已经接近解决方案了。所有你需要的是传递道具从孩子到父onClark的卡

重写的代码将被删除

js prettyprint-override">class CardContainer extends React.Component {

    render() {
        return (
            <div id="CardContainer" className="cardContainer">

                {this.props.cards.map((card, index) => (
                    <div id="card" className="card" onClick={() => this.props.handleComp(card)}>
                        <p key={index}>{card.back}</p>
                    </div>
                ))}
                
            </div>);
    }
}

然后在handleComp方法中将其保存到状态

class GameContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: cardData,
      score: 0,
      currentCard: [{}],
    }
  }

  // ====

  handleComparison = (card) => {
    //if (card.id == this.state.currentCard[0].id) -> {score++ - > gen new card}
      console.log('success');
  }

  // ====
}

Answer 2

可以从子组件传递值。

<CardContainer cards={this.state.cards} handleComp={() => this.handleComparison(whatever_value_you_want_here)}/>

然后在父母中

  handleComparison = (whatever_value_you_want_here) => {
    //if (this.props.card[x].id == this.props.currentCard[0].id) -> {score++ - > gen new card}

      console.log('success', whatever_value_you_want_here);
  }