啟用活動切換

我目前正在使用React，我列了一個清單，上面有活動狀態，我已經做了onClick函數，但是它不起作用。如果我嘗試點擊并期望切換，我得到的只是背景顏色的閃爍，我期望div在激活時得到。

import React, { useState } from 'react';
import './Home.css';

function Home() {
  const [isActive, setIsActive] = useState({
    oneStar: true,
    twoStars: false,
    threeStars: false,
    fourStars: false,
    fiveStars: false,
  });

  return (
    <div className='app_card_container'>
      <div className='app_card_body'>
        <div className='app_card_list'>
          <div
            className={isActive.oneStar
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: true,
                twoStars: false,
                threeStars: false,
                fourStars: false,
                fiveStars: false,
              })
            }
          >
            1
          </div>
          <div
            className={isActive.twoStars
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: false,
                twoStars: true,
                threeStars: false,
                fourStars: false,
                fiveStars: false,
              })
            }
          >
            2
          </div>
          <div
            className={isActive.threeStars
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: false,
                twoStars: false,
                threeStars: true,
                fourStars: false,
                fiveStars: false,
              })
            }
          >
            3
          </div>
          <div
            className={isActive.fourStars
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: false,
                twoStars: false,
                threeStars: false,
                fourStars: true,
                fiveStars: false,
              })
            }
          >
            4
          </div>
          <div
            className={isActive.fiveStars
              ? 'app_card_lists active'
              : 'app_card_lists'
            }
            onClick={() =>
              setIsActive({
                oneStar: false,
                twoStars: false,
                threeStars: false,
                fourStars: false,
                fiveStars: true,
              })
            }
          >
            5
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;

下面是我為主題中涉及的div編寫的CSS:

.app_card_list {
  display: flex;
  flex-direction: row;
}

.app_card_lists {
  margin-left: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: hsl(216, 12%, 8%);
  text-align: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: hsl(0, 0%, 100%);
}

.app_card_lists:hover {
  background-color: hsl(217, 12%, 63%);
}

.app_card_lists:active {
  background-color: red;
}

安& quot:活動& quot狀態/屬性與& quot活動& quotCSS類名。

className={isActive.oneStar ? 'app_card_lists active' : 'app_card_lists'}

當項目為& quot活動& quot你把它編碼成既有& quotapp _ card _ lists & quot和一個& quot活動& quot類名。CSS規則應該更像下面這樣:

.app_card_lists {
  margin-left: 1.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: hsl(216, 12%, 8%);
  text-align: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: hsl(0, 0%, 100%);
}

.active { /* active CSS class */
  background-color: red;
}

如果您想要限制活動CSS規則的范圍，您可以提供一個更具體的選擇器。

.app_card_lists.active { /* both app_card_lists and active CSS classes */
  background-color: red;
}

實際上在你的代碼中

app_card_lists active

意味著在css文件中應該有一個名為active的類，如下所示:

.active {
  background-color:  red;
}

正如您在代碼中所寫的，您正在檢查元素div是否沒有:active狀態，而哪個div元素沒有。

資源mdn資源

像這樣設置您的狀態:

const [activeStars, setActiveStars] = useState(1)

你可以點擊的星星是這樣的:

<div 
    className={activeStars <= 1 ? 'app_card_lists active' : 'app_card_lists'} 
    onClick={() => setActiveStars(1)}
>
1
</div>
<div 
    className={activeStars <= 2 ? 'app_card_lists active' : 'app_card_lists'} 
    onClick={() => setActiveStars(2)}
>
2
</div>
<div 
    className={activeStars <= 3 ? 'app_card_lists active' : 'app_card_lists'} 
    onClick={() => setActiveStars(3)}
>
3
</div>
<div 
    className={activeStars <= 4 ? 'app_card_lists active' : 'app_card_lists'} 
    onClick={() => setActiveStars(4)}
>
4
</div>
<div 
    className={activeStars <= 5 ? 'app_card_lists active' : 'app_card_lists'} 
    onClick={() => setActiveStars(5)}
>
5
</div>