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) 
    } 
}