admin管理员组文章数量:1295304
I am trying to create a cart, In this I am trying to call an ajax post function, by putting an add button in cart with item. In my below code in cart function, if I remove this line of onclinck function
onClick={ this.createNeworder.bind( this, this.orderid, this.item.product_code)}> Add </a> </span> ,
or add just a simple button, it show the item and button in cart. But if I add this line of code then it gives the error Cannot read property 'bind' of undefined and don't add any item in cart. I have used same onclick function in other page code and It is working but I don't know why it is not working here.
var orderid = document.getElementById('bizorderid').innerHTML;
console.log(orderid);
function testAjax() {
return $.ajax({
type: 'GET',
url: "/restaurant/menu/list/100/1",
headers: {
Accept : "application/json",
"Content-Type": "application/json"
},
async : false
}).done( function(json) {
//tata = json;
// console.log(json);
return json;
}).responseText;
}
var dt = testAjax();
var productsCollection = JSON.parse(dt);
//var promise = $.parseJSON(pt);
console.log(productsCollection)
/** @jsx React.DOM */
var Product = React.createClass({
getInitialState: function() {
return {
added: false
};
},
addToCart: function(e) {
if(!this.state.added) {
// add
$.publish('cart.added', this.props.data);
}
else {
// remove
$.publish('cart.removed', this.props.data.id);
}
this.setState({
added: !this.state.added
});
},
render: function() {
// assign to props
var data = this.props.data;
return (
<div className="card">
<div className="title">
<h3><a>{data.product_name}</a></h3> </div>
<div className="content">Price :{data.price} <br />category : {data.groupid} <br />
Units: {data.unit} <br /> Code : {data.product_code} <br />
<button className={this.state.added ? 'button success' : 'button small radius'} onClick={this.addToCart}>
{this.state.added ? 'Remove' : 'Add to cart'}
</button>
</div>
</div>
);
}
});
/** @jsx React.DOM */
var ProductsList = React.createClass({
render: function() {
var products = this.props.data.map(function(product) {
return (
<li key={product.product_code}>
<Product data={product} />
</li>
)
});
return (
<ul className="clearfix">
{products}
</ul>
);
}
});
var Cart = React.createClass({
createNeworder: function(orderid, product_code) {
//var tbn = this.iid;
// var tbn = iid;
var o_id = orderid;
console.log(o_id);
var p_code = product_code;
var unit = 1;
$.ajax({
url: '/restaurant/order/product/'+o_id+'/'+p_code+'/'+unit,
type: 'POST',
headers: {
// Accept : "application/json",
"Content-Type": "application/json"
},
success: function(data) {
// console.log(data.orderid);
var orderid = data.orderid;
console.log(orderid);
// window.location = '/diner/orderdiner/'+orderid;
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
// console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
// also subscribe to product events here
$.subscribe('cart.added', this.addItem);
$.subscribe('cart.removed', this.removeItem);
return {
items: [],
total: 0,
currency: 'EUR'
};
},
addItem: function(e, item) {
this.state.items.push(item);
this.forceUpdate();
this.countTotal();
},
removeItem: function(e, itemId) {
var itemIndexInArray;
this.state.items.some(function(item, index) {
if(item.id === itemId) {
itemIndexInArray = index;
return true;
}
});
this.state.items.splice(itemIndexInArray, 1);
this.forceUpdate();
this.countTotal();
},
countTotal: function() {
var total = 0;
this.state.items.forEach(function(item, index) {
total += item.price;
});
this.setState({
total: total
})
},
render: function() {
var items = this.state.items.map(function(item) {
// var pro_code = {item.product_code} ;
// console.log(pro_code);
return (
<li key={item.id} className="cart-item">
<span className="cart-item__name">{item.product_name}</span>
<span className="cart-item__price">{item.price} {item.currency}</span>
<span hidden className="cart-item__price">{item.product_code} {item.currency}</span>
<span > <a onClick={ this.createNeworder.bind( this, this.orderid, this.item.product_code)} > Add </a> </span>
</li>
)
});
var body = (
<ul>
{items}
</ul>
);
var empty = <div className="alert alert-info">Cart is empty</div>;
return (
<div className="panel panel-default">
<div className="panel-body">
{items.length > 0 ? body : empty}
</div>
</div>
);
}
});
React.render(<ProductsList data={productsCollection} />, document.getElementById('tabmenu'));
React.render(<Cart />, document.getElementById('cart'));
I am trying to create a cart, In this I am trying to call an ajax post function, by putting an add button in cart with item. In my below code in cart function, if I remove this line of onclinck function
onClick={ this.createNeworder.bind( this, this.orderid, this.item.product_code)}> Add </a> </span> ,
or add just a simple button, it show the item and button in cart. But if I add this line of code then it gives the error Cannot read property 'bind' of undefined and don't add any item in cart. I have used same onclick function in other page code and It is working but I don't know why it is not working here.
var orderid = document.getElementById('bizorderid').innerHTML;
console.log(orderid);
function testAjax() {
return $.ajax({
type: 'GET',
url: "/restaurant/menu/list/100/1",
headers: {
Accept : "application/json",
"Content-Type": "application/json"
},
async : false
}).done( function(json) {
//tata = json;
// console.log(json);
return json;
}).responseText;
}
var dt = testAjax();
var productsCollection = JSON.parse(dt);
//var promise = $.parseJSON(pt);
console.log(productsCollection)
/** @jsx React.DOM */
var Product = React.createClass({
getInitialState: function() {
return {
added: false
};
},
addToCart: function(e) {
if(!this.state.added) {
// add
$.publish('cart.added', this.props.data);
}
else {
// remove
$.publish('cart.removed', this.props.data.id);
}
this.setState({
added: !this.state.added
});
},
render: function() {
// assign to props
var data = this.props.data;
return (
<div className="card">
<div className="title">
<h3><a>{data.product_name}</a></h3> </div>
<div className="content">Price :{data.price} <br />category : {data.groupid} <br />
Units: {data.unit} <br /> Code : {data.product_code} <br />
<button className={this.state.added ? 'button success' : 'button small radius'} onClick={this.addToCart}>
{this.state.added ? 'Remove' : 'Add to cart'}
</button>
</div>
</div>
);
}
});
/** @jsx React.DOM */
var ProductsList = React.createClass({
render: function() {
var products = this.props.data.map(function(product) {
return (
<li key={product.product_code}>
<Product data={product} />
</li>
)
});
return (
<ul className="clearfix">
{products}
</ul>
);
}
});
var Cart = React.createClass({
createNeworder: function(orderid, product_code) {
//var tbn = this.iid;
// var tbn = iid;
var o_id = orderid;
console.log(o_id);
var p_code = product_code;
var unit = 1;
$.ajax({
url: '/restaurant/order/product/'+o_id+'/'+p_code+'/'+unit,
type: 'POST',
headers: {
// Accept : "application/json",
"Content-Type": "application/json"
},
success: function(data) {
// console.log(data.orderid);
var orderid = data.orderid;
console.log(orderid);
// window.location = '/diner/orderdiner/'+orderid;
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
// console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
// also subscribe to product events here
$.subscribe('cart.added', this.addItem);
$.subscribe('cart.removed', this.removeItem);
return {
items: [],
total: 0,
currency: 'EUR'
};
},
addItem: function(e, item) {
this.state.items.push(item);
this.forceUpdate();
this.countTotal();
},
removeItem: function(e, itemId) {
var itemIndexInArray;
this.state.items.some(function(item, index) {
if(item.id === itemId) {
itemIndexInArray = index;
return true;
}
});
this.state.items.splice(itemIndexInArray, 1);
this.forceUpdate();
this.countTotal();
},
countTotal: function() {
var total = 0;
this.state.items.forEach(function(item, index) {
total += item.price;
});
this.setState({
total: total
})
},
render: function() {
var items = this.state.items.map(function(item) {
// var pro_code = {item.product_code} ;
// console.log(pro_code);
return (
<li key={item.id} className="cart-item">
<span className="cart-item__name">{item.product_name}</span>
<span className="cart-item__price">{item.price} {item.currency}</span>
<span hidden className="cart-item__price">{item.product_code} {item.currency}</span>
<span > <a onClick={ this.createNeworder.bind( this, this.orderid, this.item.product_code)} > Add </a> </span>
</li>
)
});
var body = (
<ul>
{items}
</ul>
);
var empty = <div className="alert alert-info">Cart is empty</div>;
return (
<div className="panel panel-default">
<div className="panel-body">
{items.length > 0 ? body : empty}
</div>
</div>
);
}
});
React.render(<ProductsList data={productsCollection} />, document.getElementById('tabmenu'));
React.render(<Cart />, document.getElementById('cart'));
-
2
async:falseis just a bad idea full stop! – Jamiec Commented Oct 8, 2015 at 9:57 - This question contains about 10 times too much code. Consider slimming it down the bare bones case. – Will Jenkins Commented Oct 8, 2015 at 9:59
- thanks for your ment, let me correct if I am wrong, I am calling this function last, currently I don't need return data from this function. If I return this data still, I facing the same error – Amit Bondwal Commented Oct 8, 2015 at 9:59
- @jamiec, Agree with you, as a newbie I tried to use asyn function, but I always had timing issues, that data es later and code executed first, but currently this is not the issue, I will solve it later, thanks – Amit Bondwal Commented Oct 8, 2015 at 10:02
1 Answer
Reset to default 4React lets you pass data from the child ponent back up to its parent. We do this in the parent's render method by passing a new callback (some custom callback) into the child, binding it to the child's (click/any other) event. Whenever the event is triggered, the callback will be invoked.
I see that you are associating the callback for an onclick and hence you need to wrap the whole items array which is the result of map by doing something like
this.state.items.map(function(item) {
return (
// binding of child's event
)}.bind(this);
where this will be instance of your cart class
source: React Documentation
本文标签： javascriptCannot read property 39bind39 of undefinedStack Overflow
版权声明：本文标题：javascript - Cannot read property 'bind' of undefined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741615613a2388508.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论