如何在 ReactJS 中建立 Instagram 點贊按鈕？

大多數情況下，您都使用過 Instagram 並檢視過每篇文章下方的點贊按鈕。Instagram 點贊按鈕有兩個需要注意的地方：一個是它的形狀是心形，我們需要建立它；另一個是當我們點贊某人的帖子時，它會填充紅色。

建立 Instagram 點贊按鈕有兩種不同的方法。一種是從頭開始使用 CSS 和 JavaScript 建立，另一種使用兩個不同的圖示。一個是填充的，另一個是輪廓的。

使用 Material UI 庫

我們將使用 Material UI 庫中的 FormControlLabel 元件。它包含各種元件，例如複選框、開關、單選按鈕等，用於處理表單資料。

在我們的例子中，我們可以在 FormControlLabel 元件內部使用“複選框”元件。此外，我們可以從 Material UI 庫匯入 FavouriteIcon 和 FaviouriteBorderIcon，並將它們用作複選框元件的選中和未選中值。

語法

使用者可以按照以下語法使用 Material UI 的各種元件來建立 Instagram 點贊按鈕。

<FormControlLabel
   control = {
      <Checkbox
         icon = {<FavoriteBorderIcon />}
         checkedIcon = {<FavoriteIcon />}
      />
   }
   Label = "Like"
/>

在上面的語法中，我們將不同的圖示作為圖示的 props 和 checkedIcon prop 傳遞。

示例

在下面的示例中，我們從 Material UI 庫匯入了兩個不同的元件和兩個圖示。我們在 FormControlLabel 元件中將複選框元件用作 control props 的值。

此外，在複選框元件中，我們傳遞了兩個圖示作為 prop。我們使用 Material UI 中的 FaviouriteBorderIcon 作為 icon prop 的值，以在按鈕未點選時顯示輪廓的心形。此外，我們使用 FavouriteIcon 作為 checkedIcon prop 的值，以在使用者點選按鈕時顯示填充的心形圖示。

import React from "react";
import FormControlLabel from "@mui/material/FormControlLabel";
import FavoriteIcon from "@mui/icons-material/Favorite";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import Checkbox from "@mui/material/Checkbox";

function App() {
   return (
      <div style = {{ padding: "10px" }}>
         <h2>
            {" "}
            Creating the Instagram Like button in ReactJs using{" "}
            <i> Materia UI FormControlLabel </i> component.{" "}
         </h2>
         {/* showing different icons according to whether the checkbox is checked.   */}
         <FormControlLabel
            control = {
               <Checkbox
                  icon = {<FavoriteBorderIcon />}
                  checkedIcon = {<FavoriteIcon />}
               />
            }
            label = "Like"
         />
      </div>
   );
};
export default App;

輸出

在上面的輸出中，使用者可以觀察到，當他們點選時，圖示會變為填充，當他們再次點選時，圖示會像以前一樣變為輪廓。

使用 CSS 建立心形圖示並使用 React hooks 管理其顏色

我們可以使用自定義 CSS 建立心形。如果您想象一下，心形就像一個旋轉 45 度的正方形，以及兩側的兩個半圓。

此外，我們可以管理正方形和兩個圓的邊框，以便我們可以使其看起來像一個心形。之後，我們可以在使用者點選心形按鈕時設定背景顏色。

語法

使用者可以按照以下語法使用 React hooks 管理填充和輪廓的心形圖示。

{clicked ? (
   <span onClick = {handleClick} class = "heart-clicked"> </span>
) : (
      <span onClick = {handleClick} class = "heart"> </span>
   )}

在上面的語法中，當 clicked 變數變為 true 時，它會顯示帶有“heart-clicked”類名的圖示，該圖示已填充。否則，它會顯示帶有“heart”類名的圖示，該圖示為輪廓。

示例

在下面的示例中，我們使用 useState() hook 來跟蹤點選或未點選按鈕的使用者，並根據此切換 clicked 變數的值。

在 HTML 部分，我們根據使用者是否點選按鈕顯示帶有不同類名的不同 span 元件。

檔名：App.js

import React from "react";
import { useState } from "react";
import "./App.css";

function App() {
   const [clicked, setClicked] = useState(false);
   function handleClick(event) {
      setClicked(!clicked);
   }
   return (
      <div style = {{ padding: "10px" }}>
         <h2>
            {" "}
            Creating the Instagram Like button in ReactJs using <i>
               {" "}
               CSS only{" "}
            </i>{" "}
         </h2>
         <h3> Click and unclick the below button to Like and UnLike. </h3>
         {clicked ? (
            <span onClick = {handleClick} class = "heart-clicked"> </span>
         ) : (
            <span onClick = {handleClick} class = "heart"> </span>
         )}
      </div>
   );
}
export default App;

檔名 – App.css

在下面的 CSS 程式碼中，我們管理兩個類。“heart”類包含輪廓心形的樣式，“heart-clicked”類包含填充心形的樣式。

為了建立心形，我們首先建立了正方形。之後，我們在心形的前面和後面添加了圓圈。此外，我們透過刪除兩側的邊框切掉了半圓。此外，我們以某種方式旋轉了正方形和圓圈，使其看起來像完美的心形。

.heart,
.heart-clicked {
   border: 1px solid red;
   border-top: none;
   border-right: none;
   display: inline-block;
   height: 30px;
   margin: 0 10px;
   position: relative;
   top: 0;
   transform: rotate(-45deg);
   width: 30px;
}
.heart-clicked {
   background-color: red;
}
.heart:before,
.heart:after,
.heart-clicked:before,
.heart-clicked:after {
   content: "";
   border: 1px solid red;
   border-radius: 50%;
   height: 30px;
   position: absolute;
   width: 30px;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
}
.heart-clicked:before,
.heart-clicked:after {
   background-color: red;
}
.heart:before,
.heart-clicked:before {
   top: -15px;
   left: 0;
   border-bottom: none;
   border-left: none;
   transform: rotate(-45deg);
}
.heart:after,
.heart-clicked:after {
   left: 15px;
   top: 0;
   border-bottom: none;
   border-left: none;
   transform: rotate(45deg);
}

輸出

在本教程中，我們學習了兩種建立 Instagram 點贊按鈕的方法。如果使用者想要一種簡單的實現方式，他們應該使用第一種方法，即使用 Material UI 庫。如果使用者想要更多自定義選項，他們應該使用第二種方法，即使用自定義 CSS。

但是，這兩種方法都易於實現，並且非常適合初學者。

更新於： 2023年2月27日

2K+ 閱讀量

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告