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。