Question

我正在尝试制作答题器游戏，但我对此并不陌生，但是我对React还是有些不了解。

我已经制作了一个可以正常使用的点击按钮，并且我试图制作一个升级按钮，但是问题是它增加了点击的力量，但是并没有使玩家获得任何金钱。

我如何做到这一点，以便它减去点击费用？

https://stackblitz.com/edit/react-tyfwft

Answer 1

所以您有点亲密，只是不能使用这样的道具。 this.props始终是对您所在组件的props的引用，而不是对调用该函数的props的引用。

您想要做的是更新handleGold / handleUpgrades函数以接受一个参数，该参数将是您传递的价格支撑，例如：

<Upgrade price = {5} handleGold = {(price) => this.handleUpgrades(price)}/>

＆

handleUpgrades(price) {
    let newGold = this.state.gold - price;
    let newPower = this.state.power++;
    if ( this.state.gold >= price) {
      this.setState({
        gold : newGold,
        power : newPower,
      });
    }
  }

最后，在升级组件中，只需将道具的价格传递给该函数：

<button onClick = {() => this.props.handleGold(this.props.price)}>

React将组件的props作为函数变量传递

1 个答案: