javascript - Checkout button in game currency in react.js -
so i'm making game in game currency , confused. think i'm making harder should be. have store , users use gold(max variable) buy item. shopping cart works want when press 'checkout' subtracts total amount of gold have. right checkout button nothing. think i'm having brain fart. want new value of gold show when item purchased.
here store.js
import react, {component} 'react'; import home '../components/home'; import cart '../containers/cart'; import productlist '../containers/productlist'; import checkout '../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 , 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> ); } } here checkout.js file
import react, { proptypes } 'react'; import {component} 'react'; import cartitem './cartitem'; import home '/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; and here home.js file gold comes from:
import react, {component} 'react'; import '../app.css'; import darkalien '../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 ★ coins ★ purchase armor</span> </div> </div> </div> </div> </header> ); } }
your checkout component function based component, don't need this when calling function. need this class based components.
Comments
Post a Comment