mission 4~8

リストページのHeartボタン

コーヒー詳細ページのHeartボタン

Heartボタンはいろいろ使いましたHeart~jsでheartコンポーネントを作成して再利用しました.

mport React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart as regularHeart } from "@fortawesome/free-regular-svg-icons"; //
import { faHeart as solidHeart } from "@fortawesome/free-solid-svg-icons";

function HeartBtn() {
  const [blankColor, setColor] = useState("black");

  const [blankOpacity, setBlankOpacity] = useState("0.5");

  const [solidOpacity, setSolidOpacity] = useState("0");

  function heartChange(e) {
    if (blankColor === "black") {
      e.preventDefault();
      setColor("red");
      setBlankOpacity("0.5");
      setSolidOpacity("0.5");
    } else {
      e.preventDefault();
      setColor("black");
      setBlankOpacity("0.5");
      setSolidOpacity("0");
    }
  }

  return (
    <div className="HeartBtn">
    <a className="heart" onClick={heartChange} href="">
    <i className="blankHeart"
	style={{ opacity: blankOpacity, color: blankColor }}>
    	<FontAwesomeIcon icon={regularHeart} />
    </i>
    <i className="solidHeart" style={{ opacity: solidOpacity }}>
  	<FontAwesomeIcon icon={solidHeart} />
    </i>
</a>
</div>
);
}

export default HeartBtn;

fontawesomeアイコンの反応器での使い方を練習できます.

コメントボタン

コーヒー詳細ページにコメントと削除機能を追加

上記の機能を実現する上で多くの困難に直面している.

const [id, setId] = useState("");
const handleIdInput = (e) => {
  setId(e.target.value);
};

const [review, setReview] = useState("");
const handleReviewInput = (e) => {
  setReview(e.target.value);
};

const [reviewsList, setList] = useState([]);

const enter = (e) => {
  if (e.key === "Enter" && id && review) {
    setList(reviewsList.concat({ id: id, review: review }));
    setId("");
    setReview("");
  }
};

コメントに記録されたid値とコメントをオブジェクトに挿入し、配列に挿入するようにコメントリストを作成します.

<section id="reviews">
  {reviewsList.map((el, index) => {
    return (
      <li key={index}>
        <span className="idOutput">{el.id}</span>
        <span className="reviewOutput">{el.review}</span>
        <button className="delete" id={index} onClick={deleteReview}>
          삭제
        </button>
        <LikeBtn id={index} /> // 좋아요 버튼 컴포넌트
      </li>
    );
})}
</section>

次に、リストをmap関数に変換して、画面で実装します.
よし、いや、ボタンを構成するときは、もともと上のような構成要素ではなく、ボタンラベルとして入れただけです.
そして、「いいね」ボタンや「いいね」ボタンを押すと、誰もが問題になります.😂
原因を探そうとしたが見つからず、Heartボタンのように素子を作って実現した.

import React, { useState } from "react";
import "./LikeBtn.scss";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faThumbsUp } from "@fortawesome/free-solid-svg-icons";

function LikeBtn() {
  const [likeColor, setLikeColor] = useState("black");

  const [likeOpacity, setLikeOpacity] = useState("0.3");

  const [hateColor, setHateColor] = useState("black");

  const [hateOpacity, setHateOpacity] = useState("0.3");

  function likeChange(e) {
    if (likeColor === "black") {
      e.preventDefault();
      setLikeColor("blue");
      setLikeOpacity("0.6");
    } else {
      e.preventDefault();
      setLikeColor("black");
      setLikeOpacity("0.3");
    }
  }

  function hateChange(e) {
    if (hateColor === "black") {
      e.preventDefault();
      setHateColor("red");
      setHateOpacity("0.6");
    } else {
      e.preventDefault();
      setHateColor("black");
      setHateOpacity("0.3");
    }
  }

  return (
    <div className="LikeBtn">
      <div onClick={likeChange} className="like"
      style={{ color: likeColor, opacity: likeOpacity }}
      >
        <FontAwesomeIcon icon={faThumbsUp} />
      </div>
      <div onClick={hateChange} className="hate"
      style={{ color: hateColor, opacity: hateOpacity }}
      >
        <FontAwesomeIcon icon={faThumbsUp} />
      </div>
    </div>
	);
}

export default LikeBtn;

今度削除ボタンにまた問題が発生しました.コメントは削除しましたが、「はい、いいえ」ボタンは最後に該当するものだけ削除しました.
コメントの削除は、リストからインデックスにオブジェクト値を削除しmap関数を再実行することによって実現されます.
いいボタンとインデックス値を縛っていないため、問題が発生した可能性があると推測しています.

// 기존의 제대로 작동되지 않는 코드
const deleteReview = (e) => {
  const num = Number(e.target.id);
  setList(
    reviewsList.filter((e) => {
      return reviewsList.indexOf(e) != num;
    })
  );
};

最終的に私たちのチームのブログを参照してこの部分を解決しました.ははは(神様に感謝)😄 )

const deleteReview = (e) => {
  e.target.parentElement.remove();
};

これは、イベントが発生した親要素に近づき、除去する方法です.
知っていれば、これからも役に立ちます!
これだけのミッションをこなしてきましたが、全ての機能実現ではないことを改めて実感しました.