[react]採点機能の実装

One Tid Freeon Bodding企業課題における採点機能の実施をまとめた.

インポートアイコン

本プロジェクトではreact-iconライブラリを使用しています.

import { ImStarFull } from "react-icons/im";

スコアチェックの設定

5つの星が満点で、Boolean値を利用して論理を実現した.useStateを使用して、すべてのデフォルトをfalseに設定します.また、スコアが2の場合は[true,true,false,false,false]に限定される.

// 별점 기본값 설정
const [clicked, setClicked] = useState([false, false, false, false, false]);

スコアチェックの最終設定

5つの星をスクリーンに表示するために、地図で回転するスタックアレイを作成しました.すると、クリックした星のインデックス値がelに印刷されます.3点をあげたらel = index = 3です.

 // 더미 배열을 통해 항상 별이 총 5개가 나오도록 한다.
const array = [0, 1, 2, 3, 4]

{array.map((el) => (
            <ImStarFull
              key={el}
              onClick={() => handleStarClick(el)}
              className={clicked[el] && 'black'}
              size="35"
            />))}

クリックした星のel値(3)をhandleStarClick関数に送信し,クリックした星をtrueにする.for文をelの周りに回転させてfalseをtrueに変更します.

const handleStarClick = index => {
  let clickStates = [...clicked];
  for (let i = 0; i < 5; i++) {
    clickStates[i] = i <= index ? true : false;
  }
   setClicked(clickStates);
 };

評価のエクスポート

最後に,filterを用いてtrue値のみを抽出し,lengthを用いて個数を決定してスコア値を送信する.

let score = clicked.filter(Boolean).length;

CSS設定

デフォルトの採点色はグレーで、マウスを離したり、選択したときに黒に変換したりして、以下のようにCSSが設定されています.

const RatingBox = styled.div`
  margin: 0 auto;

  & svg {
    color: #C4C4C4;
    cursor: pointer;
  }
  :hover svg {
    color: black;
  }
  & svg:hover ~ svg {
    color: #C4C4C4;
  }
  .black {
    color: black;
  }
`

参考資料

https://velog.io/@whoyoung90/TIL-35-WECODE-%EB%B3%84%EC%A0%90-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84