onClick не реагирует на пожарJS

Question

Я пытался исправить проблему, ища проблему onClick not firing, но, увы, никто, казалось, не имел правильного решения.

Для этого проекта я недавно научил ReactJs интегрировать его в AngularJS для замены медленного ng-repeat в Angular.

Проблема, с которой я столкнулся сейчас, заключается в том, что onClick не вызывает функцию updateOrders при нажатии на рендеринг <tr>. Через мое тестирование я подтвердил, что проблема не в обработчике кликов.

В ходе моих исследований я выяснил, что люди имеют одинаковую проблему при использовании функции .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) 
    } 
}