Question

这是我调用的将PageItems添加到页面的函数。

function PageItems (props)
  var pageItems = [];
  for (var i = 0; i < props.noOfPages; i++) {
    pageItems.push(
      <li className="page-item" key={uuid.v4()}>
        <a className="page-link" onClick={props.onClick(i+1)}>{i+1}</a>
      </li>
    );
  }
  return (
    <ul className="pagination justify-content-center">
      {pageItems}
    </ul> 
  );
}

我在类

中的渲染函数

render () {
  const recipes = this.props.recipes;
  const totalRecipes = recipes.length;
  const noOfPages = totalRecipes % 3 === 0 ? totalRecipes / 3 : Math.floor(totalRecipes / 3) + 1;
  //console.log(totalRecipes, noOfPages);
  return (
    <div className="container-fluid viewRecipes">
      <nav>
        <PageItems noOfPages={noOfPages} currPageNo={this.state.currPageNo} onClick={this.handlePagination} />
      </nav>
    </div>
  );
}

这里的问题是每当我的页面加载handlePagination（现在只有console.logs传递给它的值）函数自动被触发时（我在我的构造函数中绑定函数） ）。添加单击链接没有新的控制台。请帮我解决一下这个。非常感谢！

Answer 1

props.onClick(i+1)

这将调用该函数并将返回的值分配给<a>标签onClick处理程序。要获得功能，请执行以下操作：

props.onClick.bind(this, i+1)

bind()创建一个新函数，该函数使用给定的this上下文和参数调用原始函数。如果props.onClick()接受更多参数，则新函数采用相同的参数。

Answer 2

PageItem li中的onClick不是函数引用。您可以将函数绑定为@ Code-Apprentice指出的，或者执行：

    <a className="page-link" onClick={(e) => props.onClick(i+1)}>{i+1}</a>

onClick in anchor tag触发器而不点击反应

2 个答案: