如何在 ReactJS 中创建 Instagram 点赞按钮?

react jsjavascript libraryfront end technology更新于 2025/2/7 17:16:17

首先，您已经使用过 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"
/>

在上述语法中，我们将不同的图标作为 icons 和 checkedIcon 属性的 props 进行传递。

示例

在下面的示例中，我们从 Material UI 库中导入了两个不同的组件和两个图标。我们将复选框组件用作 FormControlLabel 组件中 control 属性的值。

此外，在复选框组件中，我们传递了两个图标作为 props。我们使用 Material UI 中的 FaviouriteBorderIcon 作为 icon 属性的值，以便在按钮未点击时显示轮廓心形。此外，我们使用 FavouriteIcon 作为 checkedIcon 属性的值，以便在用户点击按钮时显示实心心形图标。

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() 钩子来跟踪用户点击或取消点击按钮的情况，并据此切换 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);
}