onClick没有火灾反应js

Question

我一直在努力通过搜索onClick不解决问题，但唉，似乎没有人有适当的解决方案。

对于这个项目，我最近学会了ReactJs将它集成到AngularJS中以取代Angular中的缓慢重复。

我现在面临的问题是，点击渲染的<tr>时，onClick不会调用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 
     ) 
     ) 
    ) 
); 
    } 
}); 

Answer 1

那么，阅读这个真的很痛苦......但这可能是问题所在。 在＃25和＃46行中，你并没有真正传递函数，而是调用（执行）它。正确的方法是更改​​updateOrders。基本上，你需要返回一个函数，当元素被点击时会被调用。

function updateOrders(reactComponent, ordPrice, ordAmt) { 
    return function(e) { 
    var scope = reactComponent.scope.$root; 
    scope.updateOrderInputS(ordPrice,ordAmt) 
    } 
}