javascript - onClick 立即触发

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=... 属性。传入的函数位于主干 View 中，其中有一个 console.log(id)。当页面加载时，如果页面上有两个 li，您会得到两次 i 变量。如果您单击其中一个 li 元素，也会发生这种情况。

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

handlePaginate 函数看起来像

handlePaginate: function(id) {
  console.log(id); //=> 1,2 (for two li elements with id's of 1 and 2)
  return false; //=> doesn't actually stop the page from refreshing oO
}

Answer 1

原来解决这个问题的方法是:

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

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