javascript - 当分页项在 ReactJS 中处于事件状态时如何更改颜色？

Question

我正在渲染一个元素列表并进行分页，我的列表的每一页都包含 3 个元素。
分页工作正常。但我不知道如何更改事件分页项的颜色，以便用户知道它在哪个页面上。
你能告诉我怎么做吗？
这是我输入的代码 codesandbox

例如，在上面的照片中，事件页面是 2。但没有迹象表明这一点。
先感谢您。

Answer 1

您可以在 map 上动态添加类函数，以便当前页面接收一个额外的类:
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>
  );

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"
  }
});

看到这个在行动 here .