如何在不同按鈕之間切換className

Question

我想在單擊時切換按鈕的 class 以相應地更改其顏色。 特定按鈕的顏色應該在點擊反應 js 時改變

我努力了

{"classname" isActive: "included classname"}

這是我的代碼...

const handlePaging=()=> {

    let totalPages = listProduct.length / entriesPerPage;
    let pageNumber = [];

    for (let i = 0; i < totalPages; i++) {

        pageNumber[i] = <li><a href={()=> false} onClick={() => handlePageNumber(i, entriesPerPage)} className={"pagination-link"}>{i+1}</a></li>
    }

    return (pageNumber)
}

const handlePageNumber=(entryNumber, entriesPerPage)=> {

    setEntryStart(entryNumber * entriesPerPage);
    setEntryEnd(((entryNumber+1)*entriesPerPage) < listProduct.length ? ((entryNumber+1)*entriesPerPage) : listProduct.length );
}

我想將 classname is-current添加到單擊的按鈕中，實際上我正在管理分頁。

Answer 1

您將需要有關選擇哪個頁面的一些信息。

// you need somewhere stored the active page.
let selectedPage = 1;

let totalPages = listProduct.length / entriesPerPage;
let pageNumber = [];

for (let i = 0; i < totalPages; i++) {
    pageNumber[i] = <li>
      <a href={()=> false} 
          onClick={() => handlePageNumber(i, entriesPerPage)} 
          className={"pagination-link " + (i === selectedPage ? "is-current" : "")}>{i+1}</a>
    </li>
}

return (pageNumber)