[英]How to change color when Item of paginate is active in ReactJS?
I am rendering a list of elements and doing pagination, each page of my list contains 3 elements.我正在渲染一个元素列表并进行分页,我的列表的每个页面都包含 3 个元素。
Pagination is working correctly.分页工作正常。 But I don't know how to change the color of the active pagination item so that the user knows which page it is on.
但我不知道如何更改活动分页项的颜色,以便用户知道它在哪个页面上。
Can you tell me how I can do that?你能告诉我怎么做吗?
Here's my code I put into codesandbox这是我放入codeandbox的代码
For example, in the photo above, the active page is 2. But there is no indication of that.例如,在上面的照片中,活动页面是 2。但没有迹象表明这一点。
Thank you in advance.先感谢您。
You can add classes dynamically on your map
function, so that the current page receives an additional class:您可以在
map
函数上动态添加类,以便当前页面接收一个附加类:
The return method of the Card component: Card组件的返回方法:
return (
<div>
{currentPerfumes.map((item) => (
<CardItem key={item.id} item={item} />
))}
<div className={classes.page}>
<div className={classes.pageContent}>
{pageNumbers.map((page, index) => {
const spanClasses = [classes.pageNumber]; // list of classes
if (index === currentPage - 1) // if we are on current page
spanClasses.push(classes.activePage); // add an additional class
return (
<span
key={page}
id={page}
onClick={() => handleClick(page)}
className={spanClasses.join(" ")}
>
{page}
</span>
);
})}
</div>
</div>
</div>
);
The styles.js has a new style, activePage
: style.js 有一个新的样式,
activePage
:
import { makeStyles } from "@material-ui/core";
export const useStyles = makeStyles({
page: {
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
pageContent: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "20%"
},
pageNumber: {
cursor: "pointer",
backgroundColor: "#ff8f32",
color: "#fff",
fontSize: "24px",
width: "20px",
textAlign: "center"
},
activePage: {
backgroundColor: "blue"
}
});
Inside your map function, you can set an active className on the condition that page === currentPage在您的地图功能中,您可以在 page === currentPage 的条件下设置一个活动的 className
{pageNumbers.map((page) => (
<span
key={page}
id={page}
onClick={() => handleClick(page)}
className={page === currentPage ? classes.activePageNumber : classes.pageNumber}
>
{page}
</span>
))}
When you are mapping over you pages you can add the index of each iteration, and then instead of giving your default class to it, you can check if the index equals to the current page.当你映射你的页面时,你可以添加每次迭代的索引,然后你可以检查索引是否等于当前页面,而不是给它默认类。 Like this:
像这样:
{pageNumbers.map((page, id) => (
<span
key={page}
id={page}
onClick={() => handleClick(page)}
className={
currentPage === id ? classes.selectedPage : classes.pageNumber
}
>
{page}
</span>
))
}
Then add the new class selectedPage
to the css:然后将新类
selectedPage
添加到 css 中:
For example:例如:
selectedPage: {
cursor: "pointer",
backgroundColor: "#000000",
color: "#fff",
fontSize: "24px",
width: "20px",
textAlign: "center"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.