Question

我有以下reactJs组件：

var Pagination = React.createClass({

  // Basic pagination
  render: function() {
    // Do we have more then one page?
    if (this.props.maxPages > 0){
      var pageLink = this.props.maxPages;
      var liElements = []

      for (var i = 1; i <= pageLink; i++) {
          liElements.push(<li key={i} id={i}><a href="#" onClick={this.props.handlePaginate(i)}>{i}</a></li>);
      }

      return (<ul className="pagination">{liElements}</ul>);
    }else{
      // Return nothing.
      return ( <div></div> );
    }
  }

});

每个li元素都有一个link元素，每个元素都有一个onClick=...属性。传入的函数位于骨干视图中，并且其中包含console.log（id）。加载页面时，如果页面上有两个li，则i变量会吐出两次。如果您单击其中一个li元素，也会发生这种情况。

我的问题是 - 当我为x个li元素加载页面时，为什么onClick会触发？为什么当我点击一个li元素时它会吐出{{1}每个i元素的变量？

li函数看起来像

handlePaginate

Answer 1

事实证明，解决这个问题的方法是：

onClick = {this.props.handlePaginate.bind(this, i)}

在链接值中，这将停止触发分页事件，并在单击li元素时停止刷新页面。

onClick正在开火

1 个答案: