我一直试图通过搜索onClick没有解决问题来解决问题,但是唉,没有人似乎有一个合适的解决方案。
对于这个项目,我最近学习了ReactJs将它集成到AngularJS中以取代Angular中的慢速ng-repeat。
我现在遇到的问题是onClick在点击渲染的<tr>
时不会调用updateOrders函数。通过我的测试,我已经确认问题不在于点击处理程序。
通过我的研究,我发现人们在使用.map函数生成数组时会遇到同样的问题。虽然我已手动完成,但问题仍然存在。
我希望社区能够指出我做错了什么。
非常感谢!
/*Click handler*/
function updateOrders(reactComponent, ordPrice, ordAmt) {
var scope = reactComponent.scope.$root;
scope.updateOrderInputS(ordPrice,ordAmt)
}
/*Component*/
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var OrderBook = React.createClass({
render: function() {
var reactComponent = this.props;
var asks = this.props.data.asks;
var bids = this.props.data.bids;
var asksRows = [];
var bidsRows = [];
var spread = Number(asks[asks.length-1].price - bids[0].price);
spread = spread.toFixed(2);
//creating array of react elements to return
for (var i = 0; i < asks.length; i++) {
var ask = asks[i];
asksRows.push(
React.createElement(
"tr",
{ "className": "trade", "key": i, "onClick": updateOrders(reactComponent, ask.price, ask.amount) },
//{ "className": "trade", "key": i },
React.createElement(
"td",
null,
Number(ask.amount).toFixed(2)
),
React.createElement(
"td",
{ style: {color: "#FF6939"} },
'$'+ Number(ask.price).toFixed(2)
)
)
)
};
for (var i = 0; i < bids.length; i++) {
var bid = bids[i];
bidsRows.push(
React.createElement(
"tr",
{ "className": "trade", "key": i*Math.PI, "onClick": updateOrders(reactComponent,bid.price, bid.amount) },
//{ "className": "trade", "key": i*Math.PI},
React.createElement(
"td",
null,
Number(bid.amount).toFixed(2)
),
React.createElement(
"td",
{ style: {color: "#50b949"} },
'$'+ Number(bid.price).toFixed(2)
)
)
)
};
return (
React.createElement(
"div",
null,
React.createElement(
"div",
{ "className": "row section-head" },
React.createElement(
"h5",
null,
"DEPTH:",
React.createElement("span", { id: "mktDptProd", style:{color:"white" }})
)
),
React.createElement(
"table",
{ "className": "table scroll table-condensed", style:{textAlign:"center"} },
React.createElement(
"thead",
null,
React.createElement(
"tr",
null,
React.createElement(
"th",
null,
"SIZE"
),
React.createElement(
"th",
null,
"PRICE"
)
)
),
React.createElement(
"tbody",
{ id: "MDtable", style: {height:"800px"} },
asksRows,
React.createElement(
"tr",
{ style: {borderTop: "1px solid #4B555C", borderBottom: "1px solid #4B555C", display:"block"} },
React.createElement(
"td",
null,
"Spread:"
),
React.createElement(
"td",
null,
spread
)
),
bidsRows
)
)
)
);
}
});
答案 0 :(得分:1)
嗯,读这个真的很痛苦......但这可能就是问题所在。 在第25行和第46行中,您实际上并未传递函数,而是调用(执行)它。正确的方法是更改updateOrders。基本上,您需要返回一个在单击元素时将被调用的函数。
function updateOrders(reactComponent, ordPrice, ordAmt) {
return function(e) {
var scope = reactComponent.scope.$root;
scope.updateOrderInputS(ordPrice,ordAmt)
}
}