Javascript react.js中游戏货币的签出按钮
所以我在用游戏货币做游戏,我真的很困惑。我想我让事情变得更难了。我有一个商店,用户在购买商品时会使用goldmax变量。购物车可以工作,但我希望当我按“结帐”时,它会从你的黄金总量中减去总金额。现在“签出”按钮不起任何作用。我想我在放屁。我希望在购买物品时显示黄金的新价值 这是Store.jsJavascript react.js中游戏货币的签出按钮,javascript,reactjs,redux,e-commerce,flux,Javascript,Reactjs,Redux,E Commerce,Flux,所以我在用游戏货币做游戏,我真的很困惑。我想我让事情变得更难了。我有一个商店,用户在购买商品时会使用goldmax变量。购物车可以工作,但我希望当我按“结帐”时,它会从你的黄金总量中减去总金额。现在“签出”按钮不起任何作用。我想我在放屁。我希望在购买物品时显示黄金的新价值 这是Store.js import React, {Component} from 'react'; import Home from '../components/Home'; import Cart from '../co
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 ★ Get Coins ★ Purchase Armor</span>
</div>
</div>
</div>
</div>
</header>
);
}
}
为什么这个问题被标记为“redux”?您似乎没有使用redux,但这实际上是一个非常好的主意。您的签出组件是一个基于函数的组件,因此在调用函数时不需要它。只有基于类的组件才需要它。绑定函数了吗?尝试将onClick={this.buttonClick}更改为onClick={this.buttonClick.bindthis}当我绑定它时,我会收到一个错误消息:TypeError:无法读取未定义的属性“bind”