处理分页链接上的点击

Question

我有这段代码，我希望在点击li console.log后显示页码。所以我把我的页面数成页面常量。我试着用两种方法。第一：

const handlePageClick = (i) => {
console.log(i);
}
const Pagination = ({pages}) => {
let list = []
for(let i = 1; i <= pages; i++){
list.push(<li key={i} onClick={handlePageClick(i)}>{i}</li>)
}
return list;
}
return (
<React.Fragment>
<div className="row">
<ul>
<Pagination pages={pages} />
</ul>
</div>
</React.Fragment>
);

它在运行应用程序后运行handlePageClick方法，而不是在单击后。

我尝试的第二种方法：

const linkRef = useRef(null);
const handlePageClick = (i) => {
console.log(linkRef.current.innerText);
}
const Pagination = ({pages}) => {
let list = []
for(let i = 1; i <= pages; i++){
list.push(<li key={i} ref={linkRef} onClick={handlePageClick}>{i}</li>)
}
return list;
}

它始终显示最后的结果。我该如何解决我的问题？

Answer 1

您必须将一个函数传递给onClick处理程序，这样您就可以在该函数中调用handlePageClick，并像这样传递i的当前值：

const Pagination = ({pages}) => {
let list = []
for(let i = 1; i <= pages; i++){
list.push(<li key={i} ref={linkRef} onClick={() => handlePageClick(i)}>{i}</li>)
}
return list;
}

请注意，您现在传递() => handlePageClick(i)的方式就是传递给onClick的方式。这是一个在点击事件发生时执行的函数，它会传递您的当前值i

Answer 2

在您的第一次尝试中，您需要使用onClick={() => handlePageClick(i)}。这是因为当前它是在应用程序渲染上调用的，因为您正在调用该方法，所以您在渲染应用程序的地方创建了一个无限循环->onClick事件被调用，从而导致另一个渲染。使用箭头函数意味着你传递一个函数，这就是你调用它的原因