react.js游戏币的结帐按钮

Question

所以我用游戏币做游戏，我很困惑。我觉得我比它应该更难。我有一家商店，用户将使用他们购买物品的黄金（最大变量）。购物车有效，但我希望当我按下“结帐”时，它会从您拥有的金额中扣除总金额。现在结帐按钮什么都不做。我想我有一个大脑放屁。我希望在购买某件商品时显示黄金的新价值。

这里是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

为什么这个问题标记为'redux'？你似乎没有使用redux，但这实际上是一个非常好的主意。

Answer 2

您的Checkout组件是一个基于功能的组件，因此您在调用该功能时不需要this。对于基于类的组件，您只需要this。