javascript - React.js 中游戏币的结账按钮

Question

所以我正在用游戏货币制作游戏，我真的很困惑。我认为我让事情变得比应有的更加困难。我有一家商店，用户将使用他们购买商品的黄金(最大变量)。购物车可以工作，但我希望当我按“结账”时，它会从您拥有的黄金数量中减去总数。现在结帐按钮没有任何作用。我觉得我脑子有问题我希望在购买元素时显示黄金的新值(value)。

这是 Store.js

import React, {Component} from 'react';
import Home from '../components/Home';
import Cart from '../containers/Cart';
import ProductList from '../containers/ProductList';
import Checkout from '../containers/Checkout';


export default class Store extends Component{
render(){
  var home = new Home
  var max = home.getMax()
    return(
      <div className="container">
          <div className="row">
              <div className="col-md-12">
                  <br />
                  <h3>Armor and Weapon Store</h3>
                  <h4 className="badge badge-warning margin-right">Gold: {max} </h4>
              </div>
          </div>
          <div className="row">
              <div className="col-md-8">
                  <ProductList />
              </div>
              <div className="col-md-4">
                  <Cart />
                  <Checkout />
              </div>
          </div>


    </div>
    );
}
}

这是我的 Checkout.js 文件

import React, { PropTypes } from 'react';
import {Component} from 'react';
import CartItem from './CartItem';
import Home from '/components/Home.js';


const Checkout = ({ total }) => {
function buttonClick() {
//  e.preventDefault();

    var home = new Home
    var max = home.getMax()
    console.log(max);
    console.log('total'+ total);
    if(max >= total){
        max = max - total;
        console.log(max);
   }
   else {
    // alert('Not enough gold!')
     console.log('Not enough gold!');
   }
}
  return(
    <div>
        <button type="button" onClick={this.buttonClick}> Checkout </button>
    </div>

);
}

Checkout.propTypes = {
total: PropTypes.number,
 }

export default Checkout;

这是黄金的来源的 Home.js 文件:

import React, {Component} from 'react';
import '../App.css';
import darkalien from '../assets/darkgray__0000_idle_1.png';


var style = {
  color: 'black',
  fontSize: 20
};
var style2 ={
color: '#daa520',
fontSize: 20
}

export default class Home extends Component{
constructor(props) {
super(props);
this.state = {
        clicks: 0,
        points: 0,
        level: 1,
        k: 0,
        max: 3,
        maxf: 2,
     }
}
getMax(){
  return localStorage.getItem('max');
}

 onClick(e) {
  e.preventDefault();

  this.setState({clicks: this.state.clicks + 1});
  this.setState({k: this.state.points + 1});

  if(this.state.clicks >= this.state.max){
      this.setState({level: this.state.level + 1});
      this.setState({max: this.state.max + 3});
      localStorage.setItem('level', this.state.level);

      this.setState({clicks: this.state.clicks});
      localStorage.setItem('clicks', this.state.clicks);

      //  this.setState({k: this.state.k});
    //    localStorage.setItem('k', this.state.k);

      if(this.state.level === this.state.maxf){
          this.setState({maxf: this.state.maxf + 1});
          localStorage.setItem('maxf', this.state.maxf);
          localStorage.setItem('max', this.state.max);
      }
    this.setState({clicks: this.setState.clicks = 0});

  }
}
render(){


    return(
    <header>
        <div className="container" id="maincontent" tabIndex="-1">
           <div className="row">
            <div className="col-lg-12">
                <div className="intro-text">

                        <p className="name" style={style} id="demo3">Level {localStorage.getItem('level')}</p>
                        <p className="name" id="demo4" style={style}>Points: {localStorage.getItem('clicks')}</p>
                        <p className="name" style={style2} id="demo5">Gold: {localStorage.getItem('max')}</p>

                    <img id="picture" className="img-responsive" src={darkalien} alt="alien-img" onClick={this.onClick.bind(this)} height="150" width="150"/>

                    <progress id="demo2" value={this.state.clicks} max={this.state.max}></progress>
                    <h1 className="name">Click me!</h1>
                    <hr className="glyphicon glyphicon-star-empty"></hr>
                   <span className="skills">Gain Experience &#9733; Get Coins &#9733; Purchase Armor</span>
                </div>
            </div>
          </div>
        </div>
    </header>
    );
}
}

Answer 1

您的 Checkout 组件是基于函数的组件，因此在调用函数时不需要 this。对于基于类的组件，您只需要this。