Реагировать на передачу реквизитов компонента в качестве переменной функции

Question

Я пытаюсь создать кликерную игру, и я не так далеко в ней, но есть кое-что, чего я не понимаю в React.

Я сделал работающую кнопку касания, и я пытался создать кнопку обновления, но проблема в том, что она увеличивает силу нажатия, но не отнимает у игрока никакого золота.

Как мне сделать так, чтобы он вычитал стоимость за клик?

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

Answer 1

Так что вы вроде как близко, вы просто не можете использовать такой реквизит.this.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,
      });
    }
  }

и, наконец, в вашем компоненте Upgrade просто передайте цену из реквизита в этотфункция:

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