所以我得到了這個(gè)叫做pages的字符串?dāng)?shù)組，其中的字符串?dāng)?shù)據(jù)是& quot音樂(lè)& quot，& quot視頻& quot和& quot娛樂(lè)& quot。

const pages =[& quot；音樂(lè)& quot，& quot視頻& quot，& quot娛樂(lè)& quot];

我想把它們顯示為3個(gè)按鈕，當(dāng)每個(gè)按鈕被選中時(shí)，我想讓它們顯示特定的CSS樣式。當(dāng)一個(gè)按鈕被選中時(shí)，另一個(gè)按鈕不能應(yīng)用CSS。但是由于某種原因，除非多次點(diǎn)擊，否則我的if條件不會(huì)被正確命中。你能幫我嗎？

這是我嘗試過(guò)的:

使用狀態(tài): const [selectedMenuItem，setSelectedMenuItem]= react . usestate(& quot；音樂(lè)& quot);

映射和if條件:

{pages.map((page) => (
              (selectedMenuItem === page) ?
                (<Button
                  key={page}
                  onClick={handleCloseNavMenu}
                  sx={{ my: 2, color: 'white', display: 'block' }}
                  className="nav-btn-selected">
                  {page} </Button>)
                :
                (<Button
                  key={page}
                  onClick={handleCloseNavMenu}
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  {page}
                </Button>)
            ))}

handleCloseNavMenu只是改變頁(yè)面:

const handleCloseNavMenu = (page) => {
    setAnchorElNav(null);
    const pageName = page.target.innerText;
    setSelectedMenuItem(pageName);
    navigation.navigate(pageName);
  };

使用的按鈕來(lái)自材質(zhì)ui。

單擊selectedMenuItem按鈕時(shí)，它的狀態(tài)應(yīng)更新為當(dāng)前與頁(yè)面交互的狀態(tài)。我建議如下& quot重構(gòu)& quot若要將按鈕的頁(yè)面值傳遞給handleCloseNavMenu，請(qǐng)單擊處理程序來(lái)更新?tīng)顟B(tài)。

const handleCloseNavMenu = page => e => {
  setSelectedMenuItem(page); // <-- set active page

  setAnchorElNav(null);
  navigation.navigate(page);
};

...

{pages.map((page) => (
  <Button
    key={page}
    onClick={handleCloseNavMenu(page)} // <-- pass page to handler
    sx={{ my: 2, color: 'white', display: 'block' }}
    className={selectedMenuItem === page ? "nav-btn-selected" : ""}
  >
    {page}
  </Button>
)}