[英]Increase number by click in react.js
I'm writing a Product
component in react.js
, and I'd like to increase the inCartCount
value of actual product when the item is clicked. 我正在
react.js
编写一个Product
组件,并且当单击该项目时,我想增加实际产品的inCartCount
值。
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Product.css';
var NumberFormat = require('react-number-format');
class Product extends React.Component {
addToCart(product) {
console.log(product.inCartCount);
product.inCartCount++;
}
render() {
const product = this.props.data;
product.inCartCount = product.inCartCount || 0;
return (
<div onClick={this.addToCart.bind(this, product)}>
<h3>{product.name}</h3>
<NumberFormat value={product.price} displayType={'text'} thousandSeparator={true} suffix={' Ft'}/>
<span>{product.inCartCount}</span>
</div>
);
}
}
export default withStyles(s)(Product);
in console.log
the value is increasing, but it is not rendered to DOM
, I always see 0
as inCartCount
value in the browser. 在
console.log
该值正在增加,但未呈现为DOM
,我始终在浏览器inCartCount
值视为0
。
You can't use code like you do it. 您不能像使用代码那样使用代码。 To increment the counter you should use
this.state.counter
and use this variable into you component. 要增加计数器,您应该使用
this.state.counter
并在您的组件中使用此变量。 Because every time when your this.state
changed, your component automatically re-rendering and take new this.state
. 因为每次
this.state
更改时,您的组件都会自动重新呈现并采用新的this.state
。 If you just change the value manually how you did this - components isn't re-rendering and you never see the changed value at the page. 如果您只是手动更改值,您将执行此操作-组件不会重新呈现,并且您永远不会在页面上看到更改后的值。 But don't forget to initalizing the
this.state = {counter: 0};
但是不要忘记
this.state = {counter: 0};
at first in the method getInitialState()
Like this: 首先在方法
getInitialState()
这样的:
getInitialState() {
return { counter: 0 };
}
and use it into render
method or into any methods like this.state.counter
并将其用于
render
方法或类似this.state.counter
任何方法
You fetch the product each time from the props which is immutable and will never be updated, you have 2 options here: 每次从道具获取产品都是不可变的,并且永远不会更新,这里有2个选项:
Problem is you are reinitialising the product in render every time, possible solutions: 问题是您每次都在渲染中重新初始化产品,可能的解决方案:
In Parent Component: 在父组件中:
<Product
updateProduct={this.updateProduct.bind(this)}
data={this.state.data}
/>
updateProduct(value){
this.setState({data:value});
}
In Child Component: 在子组件中:
addToCart(product) {
console.log(product.inCartCount);
product.inCartCount++;
this.props.updateProduct(product);
}
2. Store the product in state on child component like this: 2.将产品以状态存储在子组件上,如下所示:
import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Product.css';
var NumberFormat = require('react-number-format');
class Product extends React.Component {
constructor(props) {
super(props);
this.state = {
product: props.data
};
}
addToCart() {
let product = this.state.product;
product.inCartCount = product.inCartCount ? product.inCartCount+1 : 1;
this.setState({product});
}
render() {
return (
<div onClick={this.addToCart.bind(this)}>
<h3>{this.state.product.name}</h3>
<NumberFormat value={this.state.product.price} displayType={'text'} thousandSeparator={true} suffix={' Ft'}/>
<span>{this.state.product.inCartCount}</span>
</div>
);
}
}
export default withStyles(s)(Product);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.