javascript - onClick 不会触发reactJS

Question

我一直试图通过搜索 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
          )
        )
      )
  );
  }
});

Answer 1

嗯，读这篇文章真的很痛苦……但这可能就是问题所在。在第 #25 行和第 #46 行中，您实际上并未传递该函数，而是调用(执行)它。正确的方法是更改​​ updateOrders。基本上，您需要返回一个在单击元素时调用的函数。

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