React/Next js，根据索引在按钮上设置活动 class

Question

我正在努力创建一个 dashboard/table，我一直在设计分页部分的样式，在点击时设置一个活动的 class。我在分页中使用反应表和反应表。默认情况下，React 表格没有我想要的分页外观，所以我使用地图遍历所有按钮并相应地显示它们。现在，我尝试使用 useState 并在单击时更改它，但是当我单击一个按钮时，所有按钮都会激活 class 而不仅仅是选定的按钮。任何帮助，将不胜感激。谢谢！

const [isActive, setIsActive] = useState(false);

const toggleIsActive = () => {
    setIsActive(!isActive);
};
  
<div className={styles.pagination}>
    {pageOptions.map((option, i) => (
        <button
          onClick={() => {
              gotoPage(i);
              toggleIsActive(), i
          }}
          key={i}
          className={isActive ? styles.active : ""}
        >
            {option + 1}
        </button>
    ))}{" "}
</div>

Answer 1

更改isActive以保存active

的索引

const [isActive, setIsActive] = useState(null);
const toggleIsActive = (i) => {
  setIsActive(i);
};

onClick={() => {
  gotoPage(i);
  toggleIsActive(i);
}}
className={isActive === i ? styles.active : ""}

React/Next js，根据索引在按钮上设置活动 class

React/Next js, set active class on a button based on index

reactjs

next.js

react-table

react-hooks